Errachidia-Morocco

Developer
Omar Hassane
Size
3,872 Kb
Views
8,096
  1. Errachidia-Morocco Previews
  2. Errachidia-Morocco HTML Codes
  3. Errachidia-Morocco CSS Codes
  4. Errachidia-Morocco JS Codes

How do I make an errachidia-morocco?

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

Errachidia-Morocco Previews
IQ Test

Errachidia-Morocco - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Errachidia-Morocco</title> <script src="https://use.typekit.net/osv0ujj.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='siteWrap'> <div class='textMask'> <svg id="svg" class='textMask__svg'> <defs> <mask class='textMask__mask' id='mask' x='0' y='0' width='100%' height='100%'> <rect class='textMask__alpha' id="alpha" x="0" y="0" width="100%" height="100%"/> <text class='textMask__title will-animate' id="title" x="50%" y="50%" dy=".3em" text-anchor="middle">OMAR</text> </mask> </defs> <rect class='textMask__base' id="base" x="0" y="0" width="100%" height="100%"/> </svg> </div> <h1 id='siteTitle' class='siteTitle will-animate'>HASSANE</h1> <button id='replay'> Replay</button> <div id="background" class='bgImage' style='background-image:url(http://static.panoramio.com/photos/large/36389444.jpg);'></div>
</div> <script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Errachidia-Morocco - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,900italic,300);
* { box-sizing: border-box;
}
html,
body { height: 100%; overflow: hidden;
}
body { padding: 1em; font-family: 'industry', sans-serif; background-color: #fff;
}
@media (min-width: 960px) { body { padding: 2em; }
}
.siteWrap { width: 100%; height: 100%; position: relative;
}
.will-animate { visibility: hidden;
}
.textMask { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.textMask__svg { width: 100%; height: 100%; position: relative;
}
.textMask__textWrap { /* text-anchor: middle; */
}
.textMask__title { font-weight: 900; font-size: 3em; text-transform: uppercase;
}
@media (min-width: 960px) { .textMask__title { font-size: 20vh; }
}
.textMask__mask { font-weight: 900;
}
.textMask text { /* text-anchor: middle; */
}
.textMask__alpha { fill: #fff; transition: opacity .6s ease;
}
.textMask__base { fill: #fff; mask: url(#mask); transition: opacity .6s ease;
}
.siteTitle { position: absolute; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); line-height: 1; margin: 0; color: #fff; font-size: 3em; font-weight: 900; text-transform: uppercase;
}
@media (min-width: 960px) { .siteTitle { font-size: 20vh; }
}
.bgImage { width: 100%; height: 100%; background-position: center left; background-size: cover; position: relative; z-index: -1;
}
#replay { border: 1px solid #fff; position: absolute; bottom: 1em; left: 50%; transform: translateX(-50%); z-index: 100; background-color: transparent; height: 50px; color: #fff; text-transform: uppercase; padding: 0 2em; transition: all .3s ease;
}
#replay:hover { background-color: #fff; color: #000;
}

Errachidia-Morocco - Script Codes JS Codes

var Intro = function() { var textMaskAlpha, textMaskTitle, background, body, tl, svg, title, replay; var _init = function() { svg = document.getElementById('svg'); textMaskAlpha = document.getElementById('alpha'); textMaskTitle = document.getElementById('title'); background = document.getElementById('background'); body = document.getElementsByTagName('body')[0]; tl = new TimelineLite({delay:1}); title = document.getElementById('siteTitle'); replay = document.getElementById('replay'); _setVisible(); _animateHero(); _addEventHandlers(); } var _addEventHandlers = function() { replay.addEventListener('click', _play, false); } var _setVisible = function() { TweenLite.set(".will-animate", {visibility: 'visible'}); } var _animateHero = function() { tl .to(svg, 0.6, { opacity: 0, scale: 1.5, transformOrigin: '50% 50%', ease:Power1.easeOut}) .from(title, 0.6, { scale: 0.5, opacity: 0, transformOrigin: '50% 50%', ease:Back.easeOut}, 0); } var _play = function() { tl.restart({delay:0.3}); } return { init: _init }
}();
Intro.init();
Errachidia-Morocco - Script Codes
Errachidia-Morocco - Script Codes
Home Page Home
Developer Omar Hassane
Username omodev
Uploaded January 21, 2023
Rating 3
Size 3,872 Kb
Views 8,096
Do you need developer help for Errachidia-Morocco?

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
Homepage
D3 liquid visualisation
Pop-up contact vacances bleues
Terminal animation
TODO
Smooth scrolling
Svg exercises 2
Portfolio2
Mini-projet
Cv
Create amazing sales emails 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!