Bootstrap Snippet Interactive SVG with popups and micro-animations using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cd-popup cd-popup-industrie" role="alert">
    <div class="cd-popup-container">
    <h2>Industrie</h2>
        <p>Wenn Bauteile eigenständig mit der Produktionsanlage kommunizieren und bei Bedarf selbst eine Reparatur veranlassen oder Material nachbestellen - wenn sich Menschen, Maschinen und industrielle Prozesse intelligent vernetzen, dann sprechen wir von Industrie 4.0. Nach Dampfmaschine, Fließband und Computer stehen wir nun mit intelligenten Fabriken vor der vierten industriellen Revolution. Durch die Verzahnung von Produktion mit modernster Informations- und Kommunikationstechnik können Produkte kostengünstiger, effizienter und nach individuellen Kundenwünschen hergestellt werden. Gleichzeitig stellt die Digitalisierung die Industrie vor große Herausforderungen: Neue Daten, Vernetzung, Automatisierung und die digitale Kundenschnittstelle erfordern von Unternehmen, ihre Geschäftsprozesse und -modelle zu hinterfragen, um neue Möglichkeiten zu erkennen, zu entwickeln und umzusetzen.
    </p>
    <div class="md-chips">
      <div class="md-chip">Industrie 4.0</div>
      <div class="md-chip">Künstliche Intelligenz</div>
      <div class="md-chip">Machine Learning</div>
      <div class="md-chip">Robotik</div>
      <div class="md-chip">Automatisierung</div>
      <div class="md-chip">Cloud Computing</div>
      <div class="md-chip">Big Data</div>
      <div class="md-chip">3D Druck</div>
    </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->
<div class="cd-popup cd-popup-software" role="alert">
    <div class="cd-popup-container">
    <h2>Software</h2>
        <p>Ob vernetzter Kühlschrank, smarter Lautsprecher oder das selbstfahrende Auto: Die Produkte und Dienstleistungen der Zukunft definieren sich in erster Linie über Software und Technologien. Das verlangt schon in der Entwicklung völlig neue und flexible Herangehensweisen.
    </p>
    <div class="md-chips">
      <div class="md-chip">Künstliche Intelligenz</div>
      <div class="md-chip">Machine Learning</div>
      <div class="md-chip">API</div>
      <div class="md-chip">Big Data</div>
      <div class="md-chip">Cloud</div>
      <div class="md-chip">Agile Entwicklung</div>
    </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
line {
  color: black;
  opacity: 0.6;
  /*stroke: #9D7CBF;*/
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0.5 10;
    animation: animation_bfcj4x 400ms linear infinite;
    -webkit-animation: animation_bfcj4x 400ms linear infinite;
}
@-webkit-keyframes animation_bfcj4x{to{stroke-dashoffset:10;}}
@-moz-keyframes animation_bfcj4x{to{stroke-dashoffset:10;}}
@-o-keyframes animation_bfcj4x{to{stroke-dashoffset:10;}}
@keyframes animation_bfcj4x{to{stroke-dashoffset:10;}}
.airplane {
  animation: airplaneHovering 5s infinite;
}
@-webkit-keyframes airplaneHovering {
  0% { transform: translateY(5px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(5px); }
}
@-moz-keyframes airplaneHovering {
  0% { transform: translateY(5px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(5px); }
}
@-o-keyframes airplaneHovering {
  0% { transform: translateY(5px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(5px); }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
jQuery(document).ready(function($){
    //open popup
  console.log("loaded");
  
  $('.industrie').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-industrie').addClass('is-visible');
  });
  $('.software').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-software').addClass('is-visible');
  });
  $('.banking').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-banking').addClass('is-visible');
  });
  $('.telco').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-telco').addClass('is-visible');
  });
  $('.gesundheit').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-gesundheit').addClass('is-visible');
  });
  $('.luftfahrt').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-luftfahrt').addClass('is-visible');
  });
  $('.energie').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-energie').addClass('is-visible');
  });
  $('.transport').on('click', function(event){
    event.preventDefault();
    $('.cd-popup-transport').addClass('is-visible');
  });
  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Interactive SVG with popups and micro-animations"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Interactive SVG with popups and micro-animations" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Interactive SVG with popups and micro-animations"
Bootstrap 4.1.1 Snippet by koshikojha