Portfolio-animation

Developer
Omar Hassane
Size
3,375 Kb
Views
4,048
  1. Portfolio-animation Previews
  2. Portfolio-animation HTML Codes
  3. Portfolio-animation CSS Codes
  4. Portfolio-animation JS Codes

How do I make an portfolio-animation?

What is a portfolio-animation? How do you make a portfolio-animation? This script and codes were developed by Omar Hassane on 21 January 2023, Saturday.

Portfolio-animation Previews
IQ Test

Portfolio-animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>portfolio-animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='stage intro_s'> <div class='scene center'> <h1 class='intro'>Hassane Omar</h1> <h2 class='sub'>Full stack web developer</h2> <span class='header code'>coding</span> <span class='subheader pro'>Like a boss</span> <span class='header years'>2 years experience</span> <span class='subheader don'>of being coding ninja </span> <span class='header build'>Can build responsive websites</span> <span class='subheader calc'>in no time</span> <span class='header call'>HASSANE OMAR</span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio-animation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body { margin: 0; padding: 0; background:#fff; height: 100vh; overflow: hidden;
}
body .center { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; height: 62px; margin: auto;
}
.stage { height: 100vh; position: relative; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1.45); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1.45);
}
.scene { -webkit-perspective: 600; perspective: 600; height: 100vh;
}
.scene .header, .scene .subheader { display: block; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1) !important; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1) !important;
}
.scene h1, .scene .header { font-family: montserrat; color: #424242; font-size: 31px; font-weight: 700; margin: 0; left: -4px; letter-spacing: -3.4px; text-transform: uppercase;
}
.scene h1 span, .scene .header span { -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 1s; transition-duration: 1s; opacity: 0; position: relative; top: 20px; display: inline;
}
.scene h2 { top: -28px;
}
.scene h2, .scene .subheader { font-family: montserrat; text-transform: uppercase; letter-spacing: -2.9px; font-size: 22px; -webkit-transform-origin: 0px 0%; transform-origin: 0px 0%; color: #ED766D; -webkit-transform: rotateX(-87deg); transform: rotateX(-87deg); left: -3px; font-weight: 400; position: relative;
}
.scene .sub { opacity: 0;
}
.scene line { width: 200px; height: 2px; background: red;
}
.drop_swing { -webkit-animation: drop_swing 2s forwards, wipe_left 0.7s 2.8s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: drop_swing 2s forwards, wipe_left 0.7s 2.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.intro_s { -webkit-animation: intro_3d 0.7s 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: intro_3d 0.7s 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.intro { -webkit-animation: wipe_right 0.7s 2.85s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: wipe_right 0.7s 2.85s forwards cubic-bezier(0.19, 1, 0.22, 1); position: relative; opacity: 1;
}
.code { -webkit-animation: up 0.5s 4s forwards cubic-bezier(0.19, 1, 0.22, 1), nudge 0.26s 4.45s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_right 0.7s 6s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: up 0.5s 4s forwards cubic-bezier(0.19, 1, 0.22, 1), nudge 0.26s 4.45s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_right 0.7s 6s forwards cubic-bezier(0.19, 1, 0.22, 1); position: relative; top: 1000px;
}
.pro { -webkit-animation: down 0.45s 4.3s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_left 0.7s 6s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: down 0.45s 4.3s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_left 0.7s 6s forwards cubic-bezier(0.19, 1, 0.22, 1); position: relative; top: 1000px;
}
.don { -webkit-animation: down 0.45s 7s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_left 0.7s 8.7s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: down 0.45s 7s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_left 0.7s 8.7s forwards cubic-bezier(0.19, 1, 0.22, 1); position: relative; top: 1000px;
}
.years { -webkit-animation: up 0.5s 6.7s forwards cubic-bezier(0.19, 1, 0.22, 1), nudge 0.26s 7.15s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_right 0.7s 8.7s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: up 0.5s 6.7s forwards cubic-bezier(0.19, 1, 0.22, 1), nudge 0.26s 7.15s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_right 0.7s 8.7s forwards cubic-bezier(0.19, 1, 0.22, 1); position: relative; top: 1000px;
}
.call, .not { display: none; opacity: 0;
}
.calc { -webkit-animation: down 0.45s 9.7s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_left 0.7s 11.4s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: down 0.45s 9.7s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_left 0.7s 11.4s forwards cubic-bezier(0.19, 1, 0.22, 1); position: relative; top: 1000px;
}
.build { -webkit-animation: up 0.5s 9.4s forwards cubic-bezier(0.19, 1, 0.22, 1), nudge 0.26s 9.85s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_right 0.7s 11.4s forwards cubic-bezier(0.19, 1, 0.22, 1); animation: up 0.5s 9.4s forwards cubic-bezier(0.19, 1, 0.22, 1), nudge 0.26s 9.85s forwards cubic-bezier(0.19, 1, 0.22, 1), wipe_right 0.7s 11.4s forwards cubic-bezier(0.19, 1, 0.22, 1); position: relative; top: 1000px;
}
@-webkit-keyframes drop_swing { 0% { -webkit-transform: rotateX(-87deg); transform: rotateX(-87deg); } 50% { -webkit-transform: rotateX(-87deg); transform: rotateX(-87deg); opacity: 0; } 70% { -webkit-transform: rotateX(40deg); transform: rotateX(40deg); opacity: 1; } 80% { -webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); opacity: 1; } 90% { -webkit-transform: rotateX(15deg); transform: rotateX(15deg); opacity: 1; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}
@keyframes drop_swing { 0% { -webkit-transform: rotateX(-87deg); transform: rotateX(-87deg); } 50% { -webkit-transform: rotateX(-87deg); transform: rotateX(-87deg); opacity: 0; } 70% { -webkit-transform: rotateX(40deg); transform: rotateX(40deg); opacity: 1; } 80% { -webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); opacity: 1; } 90% { -webkit-transform: rotateX(15deg); transform: rotateX(15deg); opacity: 1; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}
@-webkit-keyframes intro_3d { 100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1); }
}
@keyframes intro_3d { 100% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1); transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1); }
}
@-webkit-keyframes wipe_left { from { left: 0; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } to { opacity: 0; left: -200px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); display: none; }
}
@keyframes wipe_left { from { left: 0; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } to { opacity: 0; left: -200px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); display: none; }
}
@-webkit-keyframes wipe_right { from { left: 0; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } to { opacity: 0; left: 200px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); display: none; }
}
@keyframes wipe_right { from { left: 0; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } to { opacity: 0; left: 200px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); display: none; }
}
@-webkit-keyframes up { 0% { top: -1000px; } 50% { top: 10px; } 100% { top: 0px; }
}
@keyframes up { 0% { top: -1000px; } 50% { top: 10px; } 100% { top: 0px; }
}
@-webkit-keyframes nudge { 0% { top: 0; } 50% { top: -10px; } 100% { top: 0px; }
}
@keyframes nudge { 0% { top: 0; } 50% { top: -10px; } 100% { top: 0px; }
}
@-webkit-keyframes down { 0% { top: 1000px; } 50% { top: -10px; } 100% { top: 0px; }
}
@keyframes down { 0% { top: 1000px; } 50% { top: -10px; } 100% { top: 0px; }
}

Portfolio-animation - Script Codes JS Codes

split = function (to_split) { words = $(to_split).text().split(''); title = $(to_split).text().split(''); for (i in words) { words[i] = '<span>' + words[i] + '</span>'; } text = words.join(''); $(to_split).html(text);
};
show_text = function (to_show,method,timing) { split($(to_show)); count = 0; length = $(to_show).find('span').length; $(to_show + ' span').each(function () { if(method == 'popup'){ $(this).delay((timing * count)+count*1).animate({ opacity: '1','top':'-10px'}, 220,'easeOutCubic'); $(this).delay((0 * count)+count/0).animate({ opacity: '1','top':'0px'}, 140); } else { $(this).delay(timing * count).animate({ opacity: '1','top':'0' }, 100); } count++; });
};
show_text('.intro','popup',10);
setTimeout(function(){ $('.sub').addClass('drop_swing')
},100)
setTimeout(function(){ $('.sub').hide() $('.intro').hide()
},3400)
setTimeout(function(){ $('.pro').hide() $('.code').hide()
},6400)
setTimeout(function(){ $('.years').hide() $('.don').hide()
},9400)
setTimeout(function(){ $('.calc').hide() $('.build').hide()
},12200)
setTimeout(function(){ $('.call,.not').css('opacity','1'); show_text('.call','popup',10); setTimeout(function(){ show_text('.not','popup',10); },233)
},12300)
Portfolio-animation - Script Codes
Portfolio-animation - Script Codes
Home Page Home
Developer Omar Hassane
Username omodev
Uploaded January 21, 2023
Rating 4.5
Size 3,375 Kb
Views 4,048
Do you need developer help for Portfolio-animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Omar Hassane (omodev) Script Codes
Name
Errachidia-Morocco
Homepage
Svg exercises
Goku flying the whole day
Pop-up contact vacances bleues
D3 liquid visualisation
Mini-projet
A Pen by Omar Hassane
Svg sky
Smooth scrolling
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!