Yeezy
How do I make an yeezy?
What is a yeezy? How do you make a yeezy? This script and codes were developed by Sleezyjus on 10 September 2022, Saturday.
Yeezy Previews
Yeezy - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>yeezy</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="demo"> <div id="container" class="container intro-effect-sidefixed"> <!-- Top Navigation --> <header class="header"> <div class="bg-img"><img src="https://timedotcom.files.wordpress.com/2016/09/kanye-west-fan-climbs-floating-stage.jpg?quality=85&w=1100" alt="" /></div> </header> <button class="trigger"><span>Scroll</span></button> <article class="content"> <div class="title"> <h1>Kanye West Cancels Remainder of Saint Pablo Tour</h1> </div> <div> <p>Kanye West has canceled the remaining 21 dates of his Saint Pablo tour, the rapper's representative confirmed to Rolling Stone. No reason for the cancellation was provided. West's rep added that tickets will be "fully refunded at point of purchase." Live Nation also confirmed to Rolling Stone that the remaining Saint Pablo dates are canceled. West has not personally commented on the announcement. </p> <p>West was scheduled to perform Sunday night at Los Angeles' Forum – itself a makeup show after vocal problems forced the rapper to cut a previous Forum gig short – but that concert was canceled at the last minute Sunday. West flooded his Instagram with exactly 99 caption-less photos of Margiela fashion spreads after the concert was canceled.</p> <p>Many popular writers have divided foods into flesh-formers, heat-givers, and bone-formers. Although attractive from its simplicity, this classification will not bear criticism. Flesh-formers are also heat-givers. Only a portion of the mineral matter goes to form bone.</p> <p>The canceled Saint Pablo dates included a December 30th and New Year's Eve concert at Brooklyn's Barclays Center. The announcement comes two days after West made controversial statements onstage about how he "would have voted for Donald Trump" in the presidential election. </p> <p>It also comes after West abruptly ended a Sacramento concert after a 30-minute rant. Four songs into the show, West launched into a tirade that called out Jay Z and Beyoncé, radio programmers, Hillary Clinton, Google and Mark Zuckerberg before cutting the concert short.</p> </div> </article> </div><!-- /container -->
</div> <script src="js/index.js"></script>
</body>
</html>
Yeezy - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,800|Lora:400italic|Playfair+Display:700);
*, *:after, *:before { box-sizing: border-box;
}
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
html, body, .container, .header { height: 100%;
}
body { background: #fff; color: #69606b; font-weight: 400; font-size: 22px; line-height: 1.5; font-family: 'Raleway', Arial, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.demo { background:yellow; color: #5c554c;
}
a { outline: none; color: #cf4a5c; text-decoration: none;
}
a:hover, a:focus { color: #69606b;
}
/* To Navigation Style */
.codrops-top { width: 100%; position: absolute; top: 0; left: 0; text-transform: uppercase; font-weight: 800; font-size: 0.6em; padding: 0 32px; letter-spacing: 1px; z-index: 10000;
}
.codrops-top a { display: inline-block; color: #fff; text-decoration: none; -webkit-transform: translateY(20px); transform: translateY(20px);
}
.codrops-top span.right { float: right;
}
.codrops-top span.right a { display: block; float: left;
}
body #cdawrap { top: 52px;
}
/* Header */
.header { position: relative; margin: 0 auto; min-height: 560px; width: 100%;
}
.bg-img { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.bg-img img { object-fit:cover; bottom:; display:block; max-width:auto; width:100%; height:100%; background-position: 50% 50%;
}
.title { z-index: 1000; margin: 0 auto; padding:0; width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.demo .content .title h1 { padding: 0; color: #fff; font-weight: 800; font-size: 5vw; margin: 0 auto;
}
.modify .content .title h1 { color: #555;
}
.title p { color: #fff; padding: 0 0 0.6em; font-weight: 300; font-size: 0.85em; margin: 0 auto;
}
.title h1,
.title p.subline { line-height: 1;
}
.title p.subline { font-size: 1.75em;
}
/* Trigger Button */
button.trigger { position: fixed; bottom: 40px; left: 50%; z-index: 5000; display: block; margin-left: -75px; width: 150px; padding: 0; border: none; background: transparent; color: white; font-size: .775em; cursor: pointer;
}
.container:not(.notrans) button.trigger { -webkit-transition: opacity 0.3s 0.5s; transition: opacity 0.3s 0.5s;
}
.container.modify:not(.notrans) button.trigger { opacity: 0; pointer-events: none; -webkit-transition-delay: 0s; transition-delay: 0s;
}
button.trigger:focus { outline: none;
}
/* Conent */
.content { margin: 0 auto; padding: 0 0 3em;
}
.content > div:not(.title) { margin: -80px auto 0; max-width: 900px; padding: 0 1.25em;
}
.content > div:not(.title) p { margin: 0 auto 1.5em auto;
}
.content > div:not(.title) p:first-child { font-size: 1.35em;
}
.content h3 { margin: 0; font-size: 1.4em;
}
.content blockquote { padding: 0.25em; font-style: italic; font-size: 1.65em; font-family: 'Lora', serif; line-height: 1.4;
}
.content blockquote::before { content: '\201C';
}
.content blockquote::after { content: '\201D';
}
/***** Individual effects *****/
/* -------------------------- */
/* Jam 3 */
/* -------------------------- */
.intro-effect-jam3:not(.notrans) .bg-img { -webkit-transition-property: top, left, right, bottom; transition-property: top, left, right, bottom;
}
.intro-effect-jam3:not(.notrans) .header h1,
.intro-effect-jam3:not(.notrans) .codrops-top a { -webkit-transition-property: color; transition-property: color;
}
.intro-effect-jam3:not(.notrans) .codrops-demos a { -webkit-transition-property: border-color, color; transition-property: border-color, color;
}
.intro-effect-jam3:not(.notrans) .header p { -webkit-transition-property: color, opacity, -webkit-transform; transition-property: color, opacity, transform;
}
.intro-effect-jam3:not(.notrans) .content > div { -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, transform;
}
.intro-effect-jam3:not(.notrans) .bg-img,
.intro-effect-jam3:not(.notrans) .header h1,
.intro-effect-jam3:not(.notrans) .codrops-top a,
.intro-effect-jam3:not(.notrans) .codrops-demos a,
.intro-effect-jam3:not(.notrans) .content > div { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.intro-effect-jam3:not(.notrans) .header p,
.intro-effect-jam3:not(.notrans) .header p.subline,
.intro-effect-jam3:not(.notrans) .content > div { -webkit-transition-duration: 0.2s; transition-duration: 0.2s;
}
.intro-effect-jam3.modify:not(.notrans) .header p,
.intro-effect-jam3.modify:not(.notrans) .header p.subline,
.intro-effect-jam3.modify:not(.notrans) .content > div { -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.intro-effect-jam3 .codrops-demos a { color: #fff;
}
.intro-effect-jam3 .codrops-demos a.current-demo { border-color: #fff;
}
.intro-effect-jam3.modify .codrops-demos a { color: #c03b5d;
}
.intro-effect-jam3.modify .codrops-demos a.current-demo { border-color: #c03b5d;
}
.intro-effect-jam3.container { padding: 45px 30px;
}
.intro-effect-jam3 .bg-img { top: -45px; right: -30px; bottom: -45px; left: -30px; background: #514753;
}
.intro-effect-jam3.modify .bg-img { top: 0; right: 0; bottom: 85%; left: 0;
}
.intro-effect-jam3.modify .header h1 { color: #514753;
}
.intro-effect-jam3 .header p { color: #514753; opacity: 0; -webkit-transform: translateY(150px); transform: translateY(150px);
}
.intro-effect-jam3.modify .header p { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.intro-effect-jam3 .content { padding: 0 5em 5em;
}
.intro-effect-jam3 .header,
.intro-effect-jam3 .content { background: #fff;
}
.intro-effect-jam3 .content > div { opacity: 0; -webkit-transform: translateY(150px); transform: translateY(150px);
}
.intro-effect-jam3.modify .content > div { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.intro-effect-jam3.modify .codrops-top a { color: #514753;
}
/* Delays */
.intro-effect-jam3.modify:not(.notrans) .header p:nth-last-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;
}
.intro-effect-jam3.modify:not(.notrans) .header p:last-child { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.intro-effect-jam3.modify:not(.notrans) .content > div { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
/* -------------------------- */
/* Faded gradient */
/* -------------------------- */
.intro-effect-fadeout:not(.notrans) .bg-img { -webkit-transition-property: -webkit-transform; transition-property: transform;
}
.intro-effect-fadeout:not(.notrans) .bg-img::after { -webkit-transition-property: opacity; transition-property: opacity;
}
.intro-effect-fadeout:not(.notrans) .header h1 { -webkit-transition-property: color; transition-property: color;
}
.intro-effect-fadeout:not(.notrans) .header p,
.intro-effect-fadeout:not(.notrans) .content > div { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity;
}
.intro-effect-fadeout:not(.notrans) .bg-img,
.intro-effect-fadeout:not(.notrans) .bg-img::after,
.intro-effect-fadeout:not(.notrans) .header h1,
.intro-effect-fadeout:not(.notrans) .header p,
.intro-effect-fadeout:not(.notrans) .content > div { -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.intro-effect-fadeout .header { overflow: hidden;
}
.intro-effect-fadeout.modify .bg-img { -webkit-transform: translateY(-25%); transform: translateY(-25%);
}
.intro-effect-fadeout .bg-img::after { content: ''; position: absolute; width: 100%; height: 101%; top: 0; left: 0; opacity: 0; pointer-events: none; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.intro-effect-fadeout.modify .bg-img::after { opacity: 1;
}
.intro-effect-fadeout .title { text-align: left; max-width: 900px;
}
.intro-effect-fadeout.modify .header h1,
.intro-effect-fadeout .header p { color: #514753;
}
.intro-effect-fadeout .header p { opacity: 0;
}
.intro-effect-fadeout .header p:nth-child(2) { -webkit-transform: translateX(150px); transform: translateX(150px);
}
.intro-effect-fadeout .header p:nth-child(3) { -webkit-transform: translateX(-150px); transform: translateX(-150px);
}
.intro-effect-fadeout.modify .header p:nth-child(2),
.intro-effect-fadeout.modify .header p:nth-child(3) { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);
}
.intro-effect-fadeout .content { z-index: 1000; position: relative;
}
.intro-effect-fadeout .content > div { opacity: 0; -webkit-transform: translateY(350px); transform: translateY(350px);
}
.intro-effect-fadeout.modify .content > div { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
/* -------------------------- */
/* Sliced */
/* -------------------------- */
.intro-effect-sliced:not(.notrans) .bg-img,
.intro-effect-sliced:not(.notrans) .title { -webkit-transition-property: -webkit-transform; transition-property: transform;
}
.intro-effect-sliced:not(.notrans) .header h1,
.intro-effect-sliced:not(.notrans) .codrops-demos a { -webkit-transition-property: color; transition-property: color;
}
.intro-effect-sliced:not(.notrans) .header p { -webkit-transition-property: opacity; transition-property: opacity;
}
.intro-effect-sliced:not(.notrans) .content > div { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity;
}
.intro-effect-sliced:not(.notrans) .bg-img,
.intro-effect-sliced:not(.notrans) .header h1,
.intro-effect-sliced:not(.notrans) .title,
.intro-effect-sliced:not(.notrans) .header p,
.intro-effect-sliced:not(.notrans) .content > div,
.intro-effect-sliced:not(.notrans) .codrops-demos a { -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.intro-effect-sliced.modify:not(.notrans) .header h1,
.intro-effect-sliced.modify:not(.notrans) .title,
.intro-effect-sliced.modify:not(.notrans) .header p,
.intro-effect-sliced.modify:not(.notrans) .content > div,
.intro-effect-sliced.modify:not(.notrans) .codrops-demos a { -webkit-transition-timing-function: ease; transition-timing-function: ease;
}
.intro-effect-sliced .bg-img:first-child { bottom: 50%;
}
.intro-effect-sliced .bg-img:last-child { top: 50%; position: fixed; z-index: 900;
}
.intro-effect-sliced .bg-img:last-child img { top: -100%;
}
.intro-effect-sliced.modify .bg-img:first-child { -webkit-transform: translateY(-80%); transform: translateY(-80%);
}
.intro-effect-sliced.modify .bg-img:last-child { -webkit-transform: translateY(100%); transform: translateY(100%);
}
.intro-effect-sliced .codrops-demos { text-align: center;
}
.intro-effect-sliced .codrops-demos a { color: #fff; font-size: 0.8em;
}
.intro-effect-sliced.modify .codrops-demos a { color: #cf4a5c;
}
.intro-effect-sliced .title { -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7); transform: translateX(-50%) translateY(-50%) scale(0.7);
}
.intro-effect-sliced.modify .title { -webkit-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1);
}
.intro-effect-sliced .header p { opacity: 0; color: #514753;
}
.intro-effect-sliced.modify .header p { opacity: 1;
}
.intro-effect-sliced.modify .header h1 { color: #514753;
}
.intro-effect-sliced .content > div { -webkit-transform: translateY(200px); transform: translateY(200px); opacity: 0;
}
.intro-effect-sliced.modify .content > div { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1;
}
/* Delays */
.intro-effect-sliced.modify:not(.notrans) .title { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
/* -------------------------- */
/* Side */
/* -------------------------- */
.intro-effect-side:not(.notrans) .bg-img::before,
.intro-effect-side:not(.notrans) .title { -webkit-transition-property: -webkit-transform; transition-property: transform;
}
.intro-effect-side:not(.notrans) .bg-img::after { -webkit-transition-property: top, left, bottom, right, background-color; transition-property: top, left, bottom, right, background-color;
}
.intro-effect-side:not(.notrans) .header p { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity;
}
.intro-effect-side:not(.notrans) .content > div { -webkit-transition-property: opacity; transition-property: opacity;
}
.intro-effect-side:not(.notrans) .bg-img::before,
.intro-effect-side:not(.notrans) .bg-img::after,
.intro-effect-side:not(.notrans) .title,
.intro-effect-side:not(.notrans) .header p,
.intro-effect-side:not(.notrans) .content > div { -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.intro-effect-side .codrops-top a { color: #7b8d92;
}
.intro-effect-side .bg-img::before,
.intro-effect-side .bg-img::after { content: ''; position: absolute; z-index: 100;
}
.intro-effect-side .bg-img::before { background: #fff; top: 0; left: 0; width: 60%; height: 100%; -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.intro-effect-side.modify .bg-img::before { -webkit-transform: translateX(0); transform: translateX(0);
}
.intro-effect-side .bg-img::after { border: 80px solid #fff; top: -80px; right: -80px; bottom: -80px; left: -80px; background-color: rgba(255,255,255,0.5);
}
.intro-effect-side.modify .bg-img::after { top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255,255,255,0);
}
.intro-effect-side .codrops-demos a { color: #43939d;
}
.intro-effect-side .codrops-demos a.current-demo { border-bottom: 3px solid #43939d;
}
.intro-effect-side .title { text-align: right; left: 0; padding: 0 3em 0 2em; width: 60%; -webkit-transform: translateX(33.3%) translateY(-50%); transform: translateX(33.3%) translateY(-50%);
}
.intro-effect-side.modify .title { -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.intro-effect-side .header h1 { font-family: 'Lora', serif; font-style: italic; font-weight: 400; padding: 0 0 0.5em 0; color: #516165;
}
.intro-effect-side .header p { opacity: 0; color: #7b8d92; -webkit-transform: translateY(100px); transform: translateY(100px);
}
.intro-effect-side.modify .header p { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);
}
.intro-effect-side .content > div { margin-top: 0px; opacity: 0;
}
.intro-effect-side.modify .content > div { opacity: 1;
}
.intro-effect-side button.trigger span::before,
.intro-effect-side button.trigger::before { color: #516165;
}
/* Delays */
.intro-effect-side:not(.notrans) .title,
.intro-effect-side:not(.notrans) .bg-img::before,
.intro-effect-side:not(.notrans) .bg-img::after { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.intro-effect-side.modify:not(.notrans) .title,
.intro-effect-side.modify:not(.notrans) .bg-img::before,
.intro-effect-side.modify:not(.notrans) .bg-img::after { -webkit-transition-delay: 0s; transition-delay: 0s;
}
.intro-effect-side.modify:not(.notrans) .header p:nth-last-child(2) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
.intro-effect-side.modify:not(.notrans) .header p:last-child { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.intro-effect-side.modify:not(.notrans) .content > div { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
/* -------------------------- */
/* Side Fixed */
/* -------------------------- */
.intro-effect-sidefixed:not(.notrans) .bg-img::before { -webkit-transition-property: background-color; transition-property: background-color;
}
.intro-effect-sidefixed:not(.notrans) .bg-img::after { -webkit-transition-property: -webkit-transform; transition-property: transform;
}
.intro-effect-sidefixed:not(.notrans) .title p { -webkit-transition-property: opacity; transition-property: opacity;
}
.intro-effect-sidefixed:not(.notrans) .content > div { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity;
}
.intro-effect-sidefixed:not(.notrans) .bg-img::before,
.intro-effect-sidefixed:not(.notrans) .bg-img::after,
.intro-effect-sidefixed:not(.notrans) .title p,
.intro-effect-sidefixed:not(.notrans) .content > div { -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.intro-effect-sidefixed .header { position: absolute;
}
.intro-effect-sidefixed .bg-img { position: fixed;
}
.intro-effect-sidefixed .bg-img img { left: auto; right: 0;
}
.intro-effect-sidefixed .bg-img::before,
.intro-effect-sidefixed .bg-img::after { content: ''; position: absolute; z-index: 100;
}
.intro-effect-sidefixed .bg-img::after { background: #f8ebda; top: 0; right: 0; width: 60%; height: 100%; -webkit-transform: translateX(100%); transform: translateX(100%);
}
.intro-effect-sidefixed.modify .bg-img::after { -webkit-transform: translateX(0); transform: translateX(0);
}
.intro-effect-sidefixed .bg-img::before { width: 100%; height: 100%; background-color: rgba(247,214,169,0.1);
}
.intro-effect-sidefixed.modify .bg-img::before { background-color: rgba(247,214,169,0.4);
}
.intro-effect-sidefixed .codrops-demos a { color: #f68f6c;
}
.intro-effect-sidefixed .title { position: relative; top: auto; left: auto; text-align: left; -webkit-transform: translateY(200px); transform: translateY(200px);
}
.intro-effect-sidefixed.modify .title { -webkit-transform: translateY(0); transform: translateY(0);
}
.intro-effect-sidefixed .title h1 { font-family: 'Playfair Display', serif; font-weight: 700; padding: 0 0 0.5em 0; color: #585a66;
}
.intro-effect-sidefixed .title p { opacity: 0; color: #585a66;
}
.intro-effect-sidefixed.modify .title p { opacity: 1;
}
.intro-effect-sidefixed .content { width: 60%; margin-left: 40%; padding: 0 2.5em;
}
.intro-effect-sidefixed .content div { position: relative; margin: 70px 0; color: #77726b;
}
.intro-effect-sidefixed .content div:nth-child(2) { opacity: 0; -webkit-transform: translateY(200px); transform: translateY(200px);
}
.intro-effect-sidefixed.modify .content div:nth-child(2) { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
/* Delays */
.intro-effect-sidefixed:not(.notrans) .title,
.intro-effect-sidefixed:not(.notrans) .bg-img::before,
.intro-effect-sidefixed:not(.notrans) .bg-img::after { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.intro-effect-sidefixed.modify:not(.notrans) .title,
.intro-effect-sidefixed.modify:not(.notrans) .bg-img::before,
.intro-effect-sidefixed.modify:not(.notrans) .bg-img::after { -webkit-transition-delay: 0s; transition-delay: 0s;
}
.intro-effect-sidefixed.modify:not(.notrans) .content div:nth-child(2) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s;
}
/* -------------------------- */
/* Push */
/* -------------------------- */
.intro-effect-push:not(.notrans) .header,
.intro-effect-push:not(.notrans) > .title,
.intro-effect-push:not(.notrans) .content > div { -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, transform; -webkit-transition-duration: 1s; transition-duration: 1s;
}
.intro-effect-push:not(.notrans) .header { -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); -webkit-transition-duration: 1.2s; transition-duration: 1.2s;
}
.intro-effect-push .codrops-demos a { color: #108576;
}
.intro-effect-push .header { position: absolute; z-index: 1500;
}
.intro-effect-push > .title { position: relative; top: auto; left: auto; padding: 6em 1em 2em;
}
.intro-effect-push .content > div { margin-top: 50px; color: #b2b2c0;
}
.intro-effect-push > .title,
.intro-effect-push .content > div { -webkit-transform: translateY(400px); transform: translateY(400px); opacity: 0;
}
.intro-effect-push.modify > .title,
.intro-effect-push.modify .content > div { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1;
}
.intro-effect-push.modify .header { opacity: 0; -webkit-transform: translateY(-100%) scale(0.9); transform: translateY(-100%) scale(0.9);
}
/* Delays */
.intro-effect-push.modify:not(.notrans) > .title { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
.intro-effect-push.modify:not(.notrans) .content > div { -webkit-transition-delay: 0.6s; transition-delay: 0.6s;
}
/* -------------------------- */
/* Grid */
/* -------------------------- */
.intro-effect-grid:not(.notrans) .grid li:nth-child(5) { -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity;
}
.intro-effect-grid:not(.notrans) .header p { -webkit-transition-property: opacity; transition-property: opacity;
}
.intro-effect-grid:not(.notrans) .bg-img,
.intro-effect-grid:not(.notrans) .title { -webkit-transition-property: -webkit-transform; transition-property: transform;
}
.intro-effect-grid:not(.notrans) .header h1,
.intro-effect-grid:not(.notrans) .codrops-demos a { -webkit-transition-property: color; transition-property: color;
}
.intro-effect-grid:not(.notrans) .grid li:nth-child(5),
.intro-effect-grid:not(.notrans) .bg-img,
.intro-effect-grid:not(.notrans) .title,
.intro-effect-grid:not(.notrans) .header h1,
.intro-effect-grid:not(.notrans) .header p,
.intro-effect-grid:not(.notrans) .codrops-demos a { -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); -webkit-transition-duration: 1s; transition-duration: 1s;
}
.intro-effect-grid .codrops-demos a { color: #fff;
}
.intro-effect-grid.modify .codrops-demos a { color: #cf7000;
}
.intro-effect-grid .codrops-demos a.current-demo { border-bottom: 3px solid #fff;
}
.intro-effect-grid.modify .codrops-demos a.current-demo { border-color: #cf7000;
}
.intro-effect-grid .title { max-width: 900px; padding-top: 2em;
}
.intro-effect-grid.modify .title { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0);
}
.intro-effect-grid .content > div { margin-top: 40px; color: #2e3337;
}
.intro-effect-grid .header h1 { font-family: 'Playfair Display', serif; font-weight: 700; padding: 0 0 0.6em;
}
.intro-effect-grid.modify .header h1 { color: #2d3b44;
}
.intro-effect-grid .header p { opacity: 0; color: #4c6270;
}
.intro-effect-grid .header p.subline { font-size: 1.5em;
}
.intro-effect-grid.modify .header p { opacity: 1;
}
.intro-effect-grid .grid { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 50%; z-index: 0;
}
.intro-effect-grid .grid li::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(71,63,59,0.5); pointer-events: none; -webkit-transition: background 0.3s; transition: background 0.3s;
}
.intro-effect-grid.modify .grid li:hover::after,
.intro-effect-grid.modify .grid li:nth-child(5)::after { background: rgba(71,63,59,0.1);
}
.intro-effect-grid .grid li { position: absolute; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; cursor: pointer; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.intro-effect-grid .grid li h2 { font-family: 'Playfair Display', serif; font-weight: 700; padding-bottom: 0.4em; margin: 1em; color: #fff; line-height: 1; font-size: 1em; position: absolute; bottom: 0; z-index: 100; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s;
}
.intro-effect-grid .grid li:hover h2 { -webkit-transform: translateY(-10px); transform: translateY(-10px);
}
.intro-effect-grid .grid li:first-child { top: 0; left: 0; height: 50%; width: 25%; background-image: url(../img/thumbs/1.jpg);
}
.intro-effect-grid .grid li:nth-child(2) { top: 50%; left: 0; height: 50%; width: 25%; background-image: url(../img/thumbs/2.jpg);
}
.intro-effect-grid .grid li:nth-child(3) { top: 0; left: 25%; height: 100%; width: 25%; background-image: url(../img/thumbs/5.jpg);
}
.intro-effect-grid .grid li:nth-child(4) { top: 0; left: 50%; height: 50%; width: 50%; background-image: url(../img/thumbs/4.jpg);
}
.intro-effect-grid .grid li:nth-child(5) { top: 50%; left: 50%; height: 50%; width: 25%; background-image: url(../img/thumbs/8.jpg); -webkit-transform: scale(0); transform: scale(0); opacity: 0;
}
.intro-effect-grid.modify .grid li:nth-child(5) { -webkit-transform: scale(1); transform: scale(1); opacity: 1;
}
.intro-effect-grid .grid li:nth-child(5) h2 { color: #de8721;
}
.intro-effect-grid .grid li:nth-child(6) { top: 50%; left: 75%; height: 50%; width: 25%; background-image: url(../img/thumbs/6.jpg);
}
.intro-effect-grid.modify .bg-img { -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
/* Media Queries */
@media screen and (max-width: 47em) { .title, .content { font-size: 70%; } .codrops-demos a { font-size: 80%; } .intro-effect-side .title { width: 100%; padding: 0 1em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .intro-effect-side.modify .bg-img::before { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .intro-effect-side .bg-img::after { border-left-width: 0px; border-right-width: 0px; right: 0px; left: 0px; background: rgba(255,255,255,0.1); } .intro-effect-side.modify .bg-img::after { background: rgba(255,255,255,0.8); } .intro-effect-sidefixed .content { width: 100%; margin-left: auto; } .intro-effect-sidefixed .bg-img::after { width: 95%; }
}
@media screen and (max-width: 27em) { .intro-effect-jam3 .content { padding: 0 2em 5em; } .intro-effect-grid .grid li h2 { display: none; } .intro-effect-push .header .title { top: 60px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .title, .content { font-size: 50%; } button.trigger::before { display: none; }
}Yeezy - Script Codes JS Codes
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };
}
else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); };
}
function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );
}
var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) { // AMD define( classie );
} else if ( typeof exports === 'object' ) { // CommonJS module.exports = classie;
} else { // browser global window.classie = classie;
}
})( window );
(function() { // detect if IE : from http://stackoverflow.com/a/16657946 var ie = (function(){ var undef,rv = -1; // Return value assumes failure. var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); var trident = ua.indexOf('Trident/'); if (msie > 0) { // IE 10 or older => return version number rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); } else if (trident > 0) { // IE 11 (or newer) => return version number var rvNum = ua.indexOf('rv:'); rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10); } return ((rv > -1) ? rv : undef); }()); // disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179 // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = [32, 37, 38, 39, 40], wheelIter = 0; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function keydown(e) { for (var i = keys.length; i--;) { if (e.keyCode === keys[i]) { preventDefault(e); return; } } } function touchmove(e) { preventDefault(e); } function wheel(e) { // for IE //if( ie ) { //preventDefault(e); //} } function disable_scroll() { window.onmousewheel = document.onmousewheel = wheel; document.onkeydown = keydown; document.body.ontouchmove = touchmove; } function enable_scroll() { window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null; } var docElem = window.document.documentElement, scrollVal, isRevealed, noscroll, isAnimating, container = document.getElementById( 'container' ), trigger = container.querySelector( 'button.trigger' ); function scrollY() { return window.pageYOffset || docElem.scrollTop; } function scrollPage() { scrollVal = scrollY(); if( noscroll && !ie ) { if( scrollVal < 0 ) return false; // keep it that way window.scrollTo( 0, 0 ); } if( classie.has( container, 'notrans' ) ) { classie.remove( container, 'notrans' ); return false; } if( isAnimating ) { return false; } if( scrollVal <= 0 && isRevealed ) { toggle(0); } else if( scrollVal > 0 && !isRevealed ){ toggle(1); } } function toggle( reveal ) { isAnimating = true; if( reveal ) { classie.add( container, 'modify' ); } else { noscroll = true; disable_scroll(); classie.remove( container, 'modify' ); } // simulating the end of the transition: setTimeout( function() { isRevealed = !isRevealed; isAnimating = false; if( reveal ) { noscroll = false; enable_scroll(); } }, 600 ); } // refreshing the page... var pageScroll = scrollY(); noscroll = pageScroll === 0; disable_scroll(); if( pageScroll ) { isRevealed = true; classie.add( container, 'notrans' ); classie.add( container, 'modify' ); } window.addEventListener( 'scroll', scrollPage ); trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } ); })();
| Developer | Sleezyjus |
| Username | sleezyjus |
| Uploaded | September 10, 2022 |
| Rating | 3 |
| Size | 8,240 Kb |
| Views | 14,168 |
Do you need developer help for Yeezy?
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!
Sleezyjus (sleezyjus) Script Codes
| Name | Size |
| Simple Lightbox with Video or Image | 2,572 Kb |
| Slidein the dm | 1,522 Kb |
| Google_mapping | 1,954 Kb |
| Off-canvas clickings | 11,108 Kb |
| A Pen by sleezyjus | 5,311 Kb |
| Simple css animate | 1,524 Kb |
| Jusmenu | 2,994 Kb |
| Drag to pan image | 3,745 Kb |
| Vyb slider | 3,289 Kb |
| Feel my color | 1,960 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Konami Code Easter Egg | Teolitto | 3,051 Kb |
| Popover Example | Seanboom | 2,429 Kb |
| E-mail Template | SoloMDFK | 4,871 Kb |
| A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
| Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
| Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
| A Pen by Jess | Jessamyne | 5,100 Kb |
| Page Transitions in Backbone | Mikefowler | 3,691 Kb |
| Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
| Custom checkbox example | Capelo | 3,495 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!