Item: Splash Morph
Rating: 3.4
Author: alexnewman

0 Downloads
1 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Splash Morph</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <device-body>
	<slider-item><img src="https://images.unsplash.com/photo-1446108440972-3798c860067c?dpr=2&fit=crop&fm=jpg&h=625&ixlib=rb-0.3.5&q=50&w=1300"></slider-item>
	<splash-body></splash-body>
	<nav>
		<cart-icon></cart-icon>
	</nav>
	<logo-icon>
				<svg xmlns="http://www.w3.org/2000/svg" version="1" id="Layer_1" x="0" y="0" viewBox="0 0 1417 567" xml:space="preserve"><style type="text/css">.st0{fill:#D0C4BF;}.st1{fill:#C6A085;}.st2{fill:#C5A186;}.st3{fill:#D1C6C1;}.st4{fill:#D0C3BD;}.st5{fill:#F3F2F2;}.st6{fill:#CFC3BD;}.st7{fill:#CEC1BB;}.st8{fill:#EB7D30;}</style><g id="KjGyqR.tif"><path class="st0" d="M1213 45c0 0 0 1 0 1 -6 3-13 3-19 0 0 0 0-1 0-1C1200 45 1207 45 1213 45z"/><path class="st1" d="M208 522c-6 0-12 0-18 0 0-1 0-1 0-2 6-1 11-1 17 0C208 521 208 521 208 522z"/><path class="st2" d="M901 522c-5 0-11 0-16 0 0-1 0-1 0-1 5-1 10-1 15 0C901 521 901 521 901 522z"/><path class="st3" d="M1365 181l0 0 0 0c-2-2-2-5-1-8 0-1 1-1 2 0C1365 176 1365 178 1365 181z"/><path class="st3" d="M190 521c0 0 0 1 0 1 -2 0-4 0-6 0 0 0 0-1 0-1C186 519 188 519 190 521z"/><path class="st4" d="M208 522c0 0 0-1 0-1 2-2 4-2 6 0 0 0 0 1 0 1C212 522 210 522 208 522z"/><path class="st5" d="M1365 173l0 0 0 0c-2-2-2-3 0-5 0 0 1 0 1 0C1365 170 1365 171 1365 173z"/><path class="st6" d="M885 521c0 0 0 1 0 1 -2 0-3 0-5 0 0 0 0-1 0-1C882 520 883 520 885 521z"/><path class="st7" d="M901 522c0 0 0-1 0-1 2-2 3-2 5 0 0 0 0 1 0 1C904 522 903 522 901 522z"/><path class="st8" d="M1364 168c0 2 0 3 0 5 0 3 0 5 0 8 0 24-6 46-21 65 -11 14-25 24-39 34 -14 10-29 18-42 29 -12 10-17 23-18 38 0 4-1 7-1 11 0 3-1 4-4 4 -31 0-62 0-93 0 -2 0-4 1-4-3 1-17-1-33 2-50 4-22 15-39 32-54 13-11 27-20 41-30 12-9 23-19 27-35 8-28-10-52-39-52 -16 0-30 4-41 16 -9 9-12 21-14 33 -1 5-1 10-1 15 0 3-1 4-4 4 -35 0-70 0-105 0 -2 0-3 0-3-3 2-37 10-71 34-100 21-26 48-41 80-50 15-4 29-6 44-6 6 0 13 0 19 0 34 1 66 9 95 28C1343 96 1361 127 1364 168z"/><path class="st8" d="M214 521c-2 0-4 0-6 0 -6 0-12 0-18 0 -2 0-4 0-6 0 -29-2-57-8-82-23C74 480 58 455 54 422c0-3-1-6-1-9 0-7 0-7 7-7 21 0 41 0 62 0 3 0 4 1 4 4 5 33 27 49 58 53 21 3 43 1 63-6 9-3 17-8 22-16 10-15 6-36-9-47 -13-10-29-14-45-18 -26-6-52-10-78-18 -15-4-29-10-42-19 -19-13-30-30-34-52 -4-26-1-51 17-72 12-14 27-22 43-29 23-9 46-13 71-13 27-1 54 3 79 13 37 16 58 43 65 82 1 6 1 6-5 6 -22 0-44 0-66 0 -2 0-4 1-5-3 -5-22-20-34-41-39 -22-4-44-4-65 4 -11 4-19 11-20 23 -2 13 4 23 14 30 5 3 10 6 16 8 19 7 38 11 58 15 27 6 54 11 79 24 24 12 41 30 46 57 8 44-8 81-49 105C275 511 252 517 227 520 223 521 218 521 214 521z"/><path class="st8" d="M541 458c7 0 14 0 20 0 58 0 116 0 174 0 5 0 6 1 6 6 0 16 0 32 0 48 0 3-1 4-4 4 -94 0-189 0-283 0 -4 0-4-1-4-5 0-14 0-29 0-43 0-2 1-4 2-6 54-65 107-130 161-195 7-8 13-16 20-24 -2-1-4-1-6-1 -53 0-106 0-158 0 -5 0-6-1-6-6 0-16 0-32 0-48 0-3 1-4 4-4 87 0 174 0 261 0 3 0 4 1 4 4 0 15 0 29 0 44 0 3-1 4-2 6 -47 56-95 111-142 167 -14 16-27 32-41 48C544 454 543 456 541 458z"/><path class="st8" d="M433 350c0 53 0 105 0 157 0 4-1 6-6 6 -21 0-41 0-62 0 -4 0-6-1-6-5 0-94 0-189 0-283 0-11 0-22 0-33 0-5 2-6 6-6 20 0 41 0 61 0 5 0 6 1 6 6C433 244 433 297 433 350z"/><path class="st8" d="M1193 394c18 0 36 0 55 0 4 0 5 1 5 5 0 37 0 73 0 110 0 4-1 5-5 5 -37 0-73 0-110 0 -3 0-5-1-5-4 0-37 0-74 0-110 0-4 1-4 5-4C1156 394 1174 394 1193 394z"/><path class="st8" d="M396 124c-10 0-21 0-31 0 -3 0-5-1-5-4 0-20 0-40 0-60 0-3 1-5 4-4 22 0 43 0 65 0 3 0 4 1 4 4 0 20 0 41 0 61 0 4-1 4-5 4C417 124 407 124 396 124z"/><path class="st8" d="M1040 282c-25-76-95-120-174-108 -50 8-87 34-111 78 -29 52-30 108-13 164 9 28 24 52 47 71 27 22 58 32 91 34 2 0 3 0 5 0 5 0 11 0 16 0 2 0 3 0 5 0 8 0 17-1 25-3 57-13 96-47 112-104 1-4 0-5-3-4 -20 0-40 0-59 0 -4 0-6 1-7 5 -7 18-18 33-36 42 -18 9-37 10-56 8 -27-3-47-16-61-39 -9-15-13-32-14-50 0-8-1-8 8-8 77 0 153 0 230 0 4 0 6 0 6-5C1051 334 1048 308 1040 282zM970 318c-27 0-54 0-80 0 -26 0-52 0-78 0 -7 0-7 0-6-6 3-34 24-66 60-78 46-14 91 11 105 58 2 7 3 14 4 21C975 317 974 318 970 318z"/></g></svg>
			</logo-icon>
</device-body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/alexnewman/splash-morph-VvERWd */
* {
  box-sizing: border-box;
}
body {
  display: flex;
  min-height: 100vh;
}
nav {
  height: 50px;
  width: 100%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}
slider-item {
  margin-top: 50px;
  transition: -webkit-transform 0.4s ease-out 0s;
  transition: transform 0.4s ease-out 0s;
  transition: transform 0.4s ease-out 0s, -webkit-transform 0.4s ease-out 0s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
slider-item img {
  max-width: 100%;
}
slider-item.slide-down {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
device-body {
  background: #eaeaea;
  margin: auto;
  width: 50vmin;
  height: 90vmin;
  position: relative;
  display: flex;
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  device-body {
    width: 100vmin;
    height: 100vh;
  }
}
@media screen and (max-height: 500px) {
  device-body {
    height: 100vmin;
    width: 100vmin;
  }
}
splash-body {
  background: #000;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: 0.25s -webkit-transform ease;
  transition: 0.25s transform ease;
  transition: 0.25s transform ease, 0.25s -webkit-transform ease;
  -webkit-transform-origin: top;
          transform-origin: top;
  top: 0;
  left: 0;
}
logo-icon {
  margin: auto;
  position: absolute;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
logo-icon svg {
  margin: auto;
  width: 50%;
}
.slide-up {
  -webkit-transform: scale(0.5) translateY(-81vmin);
          transform: scale(0.5) translateY(-81vmin);
}
.slide-body {
  -webkit-transform: scale(1, 0.1);
          transform: scale(1, 0.1);
}


/*Downloaded from https://www.codeseek.co/alexnewman/splash-morph-VvERWd */
// $('splash-body').addClass('slide-up')

$('html').on('click', function() {
	$('logo-icon').toggleClass('slide-up');
	$('splash-body').toggleClass('slide-body')
	$('slider-item').toggleClass('slide-down')
});

Comments

More from alexnewman

Splash Morph

In this example below you will see how to do a Splash Morph with some HTML / CSS and Javascript

Technologies

Comments

More from alexnewman

grid to list icon

A Pen by Alex Newman

A Pen by Alex Newman

Summary

You Might Also Like

Custom HTML5 Video Player / Vanilla JS 30.11

learning about functions

Flex-Wrap example

lesson3-6

A Pen by Olusegun Peterson

[Topic-09] Display, Pt. 2

Cold-Hot Toggle Switch

Interactive Rotating Wheel - VueJS