New elements added to hero section
This commit is contained in:
BenjaminToby
parent
a32335656f
commit
3903a4f8ca
BIN
images/body-bg.jpg
Normal file
BIN
images/body-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
images/mobile-app.png
Normal file
BIN
images/mobile-app.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
images/pain-splatter-1.png
Normal file
BIN
images/pain-splatter-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
images/stone-wall-bg.jpg
Normal file
BIN
images/stone-wall-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
20
index.html
20
index.html
@ -19,6 +19,10 @@
|
||||
|
||||
<body><!-- ...................................................................................................................... Body -->
|
||||
|
||||
<div id="wavy-line"></div>
|
||||
|
||||
<div class="body-bg"></div>
|
||||
|
||||
<header>
|
||||
<a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy';">Tben</span>design</a>
|
||||
<nav>
|
||||
@ -42,7 +46,7 @@
|
||||
<section class="hero-section">
|
||||
<div class="container-1200px hero-content-container">
|
||||
<div class="column-50">
|
||||
<h1 style="background-color:#fff;color:#333;">Benjamin Toby.</h1>
|
||||
<h1 class="my-name">Benjamin Toby.</h1>
|
||||
<h2 class="hero-subtext">Hi! I'm a
|
||||
<a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
|
||||
<a class="hero-content-link" id="web-design">Web Designer</a>,
|
||||
@ -67,12 +71,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column-50 centered-content" style="perspective:600px;z-index:-1;">
|
||||
<div class="column-50 centered-content" id="animation-half-column">
|
||||
<div class="face-wrapper" id="my-face-wrapper">
|
||||
<div id="my-face"></div>
|
||||
<div id="color-overlay"></div>
|
||||
<div class="hero-image-blur"></div>
|
||||
<div class="hero-image-blur"></div>
|
||||
<!--
|
||||
<div class="paint-spatter"></div>
|
||||
<div class="morphing-shapes-container">
|
||||
</div>
|
||||
-->
|
||||
<div id="morph-shape-1"></div>
|
||||
<div id="morph-shape-2"></div>
|
||||
<div id="morph-shape-3"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-1200px" style="justify-content:center;align-items:center;padding:0;margin-top:-20px;">
|
||||
|
||||
153
main.css
153
main.css
@ -176,10 +176,6 @@ input:focus {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section.hero-section {
|
||||
padding: 0px 40px 40px 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*................................................... Nav */
|
||||
@ -238,6 +234,40 @@ section.hero-section {
|
||||
|
||||
/*................................................... Hero Section */
|
||||
|
||||
section.hero-section {
|
||||
padding: 0px 40px 40px 40px;
|
||||
}
|
||||
|
||||
.my-name {
|
||||
color: #222;
|
||||
padding: 0px;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.body-bg {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
opacity: .5;
|
||||
min-height: 100vh;
|
||||
background-image: url("images/stone-wall-bg.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#wavy-line {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 350px;
|
||||
left: 0;
|
||||
opacity: .5;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.body-bg.gradient {
|
||||
/*background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0));*/
|
||||
}
|
||||
|
||||
.hero-content-container {
|
||||
align-items: center;
|
||||
}
|
||||
@ -289,12 +319,7 @@ section.hero-section {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.my-name {
|
||||
color: #3C60DE;
|
||||
background-color: #E6EDFF;
|
||||
padding: 0 10px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.linkedin-block {
|
||||
padding: 10px 20px 10px 10px;
|
||||
@ -322,6 +347,11 @@ section.hero-section {
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
#animation-half-column {
|
||||
perspective: 600px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#my-face {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
@ -336,8 +366,8 @@ section.hero-section {
|
||||
position: relative;
|
||||
animation: facehover 3s infinite;
|
||||
animation-timing-function: ease;
|
||||
transform-style: preserve-3d;
|
||||
transition: all .4s ease-out;
|
||||
perspective: 600px;
|
||||
/* transform: rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/
|
||||
}
|
||||
|
||||
@ -385,6 +415,62 @@ section.hero-section {
|
||||
opacity: .05;
|
||||
}
|
||||
|
||||
.paint-spatter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-image: url("images/pain-splatter-1.png");
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -10;
|
||||
transform: scale(1.5);
|
||||
mix-blend-mode: lighten;
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
.morphing-shapes-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -10;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
#morph-shape-1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#morph-shape-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
bottom: 120px;
|
||||
right: -60px;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
#morph-shape-3 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
opacity: .5;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.scroll-down-icon {
|
||||
font-size:80px;
|
||||
font-weight:400;
|
||||
@ -491,6 +577,16 @@ section.hero-section {
|
||||
right: -20vw;
|
||||
}
|
||||
|
||||
#wavy-line {
|
||||
width: 300%;
|
||||
top: 500px;
|
||||
}
|
||||
|
||||
#morph-shape-1 {
|
||||
top: 20px;
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -561,6 +657,34 @@ section.hero-section {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.face-wrapper {
|
||||
margin-top: -100vw;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
right: -50vw;
|
||||
}
|
||||
|
||||
#wavy-line {
|
||||
width: 300%;
|
||||
top: 450px;
|
||||
}
|
||||
|
||||
#morph-shape-1 {
|
||||
top: 20px;
|
||||
left: 60px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 350px) {
|
||||
|
||||
.face-wrapper {
|
||||
margin-top: -130vw;
|
||||
width: 400px;
|
||||
@ -568,6 +692,13 @@ section.hero-section {
|
||||
right: -50vw;
|
||||
}
|
||||
|
||||
#morph-shape-1 {
|
||||
top: 10px;
|
||||
left: 90px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -3,6 +3,9 @@ var faceWrapper = document.getElementById("my-face-wrapper");
|
||||
lottie.setQuality("low");
|
||||
|
||||
var myFaceContainer = document.getElementById("my-face");
|
||||
var morphShape1Container = document.getElementById("morph-shape-1");
|
||||
var morphShape2Container = document.getElementById("morph-shape-2");
|
||||
var morphShape3Container = document.getElementById("morph-shape-3");
|
||||
|
||||
var myFace = lottie.loadAnimation({
|
||||
container: myFaceContainer,
|
||||
@ -12,7 +15,36 @@ var myFace = lottie.loadAnimation({
|
||||
autoplay: false,
|
||||
});
|
||||
|
||||
myFace.setSpeed(1);
|
||||
var morphShape1 = lottie.loadAnimation({
|
||||
container: morphShape1Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
var morphShape2 = lottie.loadAnimation({
|
||||
container: morphShape2Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
morphShape1.setSpeed(1.5);
|
||||
|
||||
var morphShape3 = lottie.loadAnimation({
|
||||
container: morphShape3Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
morphShape3.setSpeed(2);
|
||||
|
||||
|
||||
|
||||
|
||||
function steadyState() {
|
||||
myFace.playSegments([44, 205], true);
|
||||
|
||||
1
scripts/morphing-shape-1.json
Normal file
1
scripts/morphing-shape-1.json
Normal file
@ -0,0 +1 @@
|
||||
{"v":"5.7.6","fr":30,"ip":0,"op":362,"w":200,"h":200,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[108,101.75,0],"ix":2,"l":2},"a":{"a":0,"k":[8,1.75,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.51,"y":1},"o":{"x":0.506,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]},{"i":{"x":0.438,"y":1},"o":{"x":0.53,"y":0},"t":121,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-16.5,-48.5],[-86.5,87.5],[87,-85]],"c":true}]},{"i":{"x":0.432,"y":1},"o":{"x":0.475,"y":0},"t":240,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[79,25.5],[-8,-32],[-85.5,85]],"c":true}]},{"t":361,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":364,"st":0,"bm":0}],"markers":[]}
|
||||
1
scripts/wavy-line.json
Normal file
1
scripts/wavy-line.json
Normal file
@ -0,0 +1 @@
|
||||
{"v":"5.7.6","fr":30,"ip":0,"op":182,"w":1440,"h":300,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[732,83.933,0],"ix":2,"l":2},"a":{"a":0,"k":[12,173.933,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.406,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.497,"y":0},"t":90,"s":[{"i":[[0,0],[-220.28,-4.969],[-254.604,-13.3],[0,0]],"o":[[0,0],[266,6],[268,14],[0,0]],"v":[[-780,216],[-334,268],[348,228],[776,284]],"c":false}]},{"t":182,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":182,"st":0,"bm":0}],"markers":[]}
|
||||
Loading…
Reference in New Issue
Block a user