IT3 - Opdracht 09 - RellaxJS

Developer
Samuel
Size
4,331 Kb
Views
14,168
  1. IT3 - Opdracht 09 - RellaxJS Previews
  2. IT3 - Opdracht 09 - RellaxJS HTML Codes
  3. IT3 - Opdracht 09 - RellaxJS CSS Codes
  4. IT3 - Opdracht 09 - RellaxJS JS Codes

How do I make an it3 - opdracht 09 - rellaxjs?

What is a it3 - opdracht 09 - rellaxjs? How do you make a it3 - opdracht 09 - rellaxjs? This script and codes were developed by Samuel on 10 November 2022, Thursday.

IT3 - Opdracht 09 - RellaxJS Previews
IQ Test

IT3 - Opdracht 09 - RellaxJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IT3 - Opdracht 09 - RellaxJS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <section class="rellax" data-rellax-speed="-2"> <figure> <img src="http://images.junostatic.com/full/CS1821691-02A-BIG.jpg" alt="Meiso" /> <figcaption> <h1>Meiso <span>迷走</span></h1> <aside>DJ Krush</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="-1"> <figure> <img src="https://pbs.twimg.com/media/CmfCuUyUsAAqcPt.jpg:large" alt="Savage Mode" /> <figcaption> <h1>Savage Mode</h1> <aside>21 Savage &amp; Metro Boomin</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="1"> <figure> <img src="http://www.silent-watcher.net/billlaswell/discography/images/misc/kiokuusa.jpg" alt="Ki-Oku" /> <figcaption> <h1>Ki-Oku</h1> <aside>DJ Krush &amp; Toshinori Kondo</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="0"> <figure> <img src="http://static.stereogum.com/uploads/2014/08/Mick-Jenkins-The-Waters.jpg" alt="The Water[s]" /> <figcaption> <h1>The Water[s]</h1> <aside>Mick Jenkins</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="2"> <figure> <img src="http://resources.wimpmusic.com/images/75106c86/6d2e/470f/b4d0/c6a545a5b11c/1280x1280.jpg" alt="The Unseen" /> <figcaption> <h1>The Unseen</h1> <aside>Quasimoto</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="1"> <figure> <img src="https://images.genius.com/152ab5d401ce8344e26186e3a162627c.1000x1000x1.jpg" alt="Lame" /> <figcaption> <h1>Lame <span>ダサい</span></h1> <aside>Xavier Wulf &amp; Bones</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="4"> <figure> <img src="http://images.genius.com/583df8c960717e6151d8fac6144eb8fa.1000x1000x1.jpg" alt="Malibu" /> <figcaption> <h1>Malibu</h1> <aside>Anderson .Paak</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="3"> <figure> <img src="http://www.hiphopinjesmoel.com/wp-content/uploads/2014/03/freddie-gibbs-madlib-pinata.jpg" alt="Piñata" /> <figcaption> <h1>Piñata</h1> <aside>Freddie Gibbs &amp; Madlib</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="6"> <figure> <img src="http://images.junostatic.com/full/CS1701044-02A-BIG.jpg" alt="Jazzmatazz vol. 1" /> <figcaption> <h1>Jazzmatazz vol. 1</h1> <aside>Guru</aside> </figcaption> </figure> </section> <section class="rellax" data-rellax-speed="9"> <figure> <img src="http://cdn.pitchfork.com/albums/17226/e1fca993.jpeg" alt="Well-Done" /> <figcaption> <h1>Well-Done</h1> <aside>Action Bronson</aside> </figcaption> </figure> </section> <div class="ruler"></div>
</main> <script src='https://dixonandmoe.com/assets/javascripts/rellax.min-2a988568.js'></script> <script src="js/index.js"></script>
</body>
</html>

IT3 - Opdracht 09 - RellaxJS - Script Codes CSS Codes

/* html & body */
html { overflow-x: hidden;
}
html body { background: #fff; font-family: "Helvetica Neue", sans-serif; font-size: 62.5%;
}
/* main */
main { padding: 100px 0 0 0;
}
main div.ruler { background: #eee; height: 100vh; left: 33.33%; position: fixed; top: 0; width: 1px; z-index: -1;
}
main section { width: 100%;
}
main section figure { -webkit-filter: blur(4px) grayscale(0.5); filter: blur(4px) grayscale(0.5); overflow: auto; -webkit-transition: all 0.6s; transition: all 0.6s; width: 100%;
}
main section figure:hover { -webkit-filter: blur(0) grayscale(0); filter: blur(0) grayscale(0);
}
main section figure img { clear: both; width: 34vw;
}
main section figure figcaption h1 { font-weight: 900;
}
main section figure figcaption h1 span { font-size: 86%;
}
main section figure figcaption aside { font-weight: 100; margin-top: 10px;
}
main section:nth-child(odd) figure { -webkit-animation: rotateOdd 40s linear infinite; animation: rotateOdd 40s linear infinite;
}
main section:nth-child(odd) figure img { -webkit-clip-path: polygon(0 0, 99% 4%, 93% 96%, 0% 100%); clip-path: polygon(0 0, 99% 4%, 93% 96%, 0% 100%); float: left; margin: 0 25px 0 10%;
}
main section:nth-child(even) figure { -webkit-animation: rotateEven 40s linear infinite; animation: rotateEven 40s linear infinite; text-align: right;
}
main section:nth-child(even) figure img { -webkit-clip-path: polygon(1% 4%, 100% 0, 100% 100%, 7% 96%); clip-path: polygon(1% 4%, 100% 0, 100% 100%, 7% 96%); float: right; margin: 0 10% 0 25px;
}
main section:nth-child(4) { margin-bottom: 200px;
}
main section:nth-child(6) { margin-bottom: 600px;
}
main section:nth-child(8) { margin-top: -300px; margin-bottom: 850px;
}
main section:nth-child(9) { margin-bottom: 800px;
}
/* animations */
@-webkit-keyframes rotateOdd { 0% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); } 50% { -webkit-transform: rotateY(15deg) rotateX(-30deg) translateX(3%) translateY(3%); transform: rotateY(15deg) rotateX(-30deg) translateX(3%) translateY(3%); } 100% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); }
}
@keyframes rotateOdd { 0% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); } 50% { -webkit-transform: rotateY(15deg) rotateX(-30deg) translateX(3%) translateY(3%); transform: rotateY(15deg) rotateX(-30deg) translateX(3%) translateY(3%); } 100% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); }
}
@-webkit-keyframes rotateEven { 0% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); } 50% { -webkit-transform: rotateY(-15deg) rotateX(-30deg) translateX(-3%) translateY(-3%); transform: rotateY(-15deg) rotateX(-30deg) translateX(-3%) translateY(-3%); } 100% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); }
}
@keyframes rotateEven { 0% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); } 50% { -webkit-transform: rotateY(-15deg) rotateX(-30deg) translateX(-3%) translateY(-3%); transform: rotateY(-15deg) rotateX(-30deg) translateX(-3%) translateY(-3%); } 100% { -webkit-transform: rotateY(0) rotateX(0) translateX(0) translateY(0); transform: rotateY(0) rotateX(0) translateX(0) translateY(0); }
}
@media screen and (max-width: 726px) { main { padding: 50px 0 0 0; }
}

IT3 - Opdracht 09 - RellaxJS - Script Codes JS Codes

function main() { var rellax = new Rellax('.rellax'); var section = document.getElementsByTagName('section'); var figcaption = document.getElementsByTagName('figcaption'); var heading = document.getElementsByTagName('h1'); var aside = document.getElementsByTagName('aside'); function control() { for (var i = 0; i < section.length; i++) { var sectionControl = window.getComputedStyle(section[i]); var figcaptionControl = window.getComputedStyle(figcaption[i]); } var sectionHeight = sectionControl.height; var figcaptionHeight = figcaptionControl.height; var res = (sectionHeight.slice(0, -2)) - (figcaptionHeight.slice(0, -2)); for (var i = 0; i < figcaption.length; i++) { figcaption[i].style.paddingTop = res / 2 + 'px'; heading[i].style.fontSize = Math.round(window.innerWidth / 205) + 'em'; aside[i].style.fontSize = Math.round(window.innerWidth / 576) + 'em'; } } control(); window.onresize = function() { control(); }
}
window.onload = function() { main();
}
IT3 - Opdracht 09 - RellaxJS - Script Codes
IT3 - Opdracht 09 - RellaxJS - Script Codes
Home Page Home
Developer Samuel
Username SamuelVDP
Uploaded November 10, 2022
Rating 3
Size 4,331 Kb
Views 14,168
Do you need developer help for IT3 - Opdracht 09 - RellaxJS?

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!

Samuel (SamuelVDP) Script Codes
Name
IT3 - Opdracht 03 - FreshCotton
IT2 - Vault
CMT3 - Herhalingsoefening 02
CMT3 - Opdracht 02 - OBEY
CMT3 - Herhalingsoefening 03
CMT3 - Herhalingsoefening 01
IT3 - Opdracht 01 - Drop The Needle
IT3 - Opdracht 04 - Responsive Weekplanner
IT2 - Record Player
CMT3 - Opdracht 07 - Flickity
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!