WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par efficientcloud646
1212
efficientcloud646
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
8 September 2024
Marquee infini uniquement en CSS
4 December 2024
Un code par mikey
13 December 2024
Un code par creativefunction305
HTML
Copy
Andev Web
King
Rapper
Roman warrior
Samurai
01
01
04
02
02
03
03
04
04
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese'); body{ width: 100%; height: 100vh; background: #000; overflow: hidden; } .cursor, .cursor2, .cursor3{ position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50% } .cursor{ background-color: #585858; height: 0; width: 0; z-index: 99999; } .cursor2,.cursor3{ height: 36px; width: 36px; z-index:99998; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out } .cursor2.hover, .cursor3.hover{ -webkit-transform:scale(2) translateX(-25%) translateY(-25%); transform:scale(2) translateX(-25%) translateY(-25%); border:none } .cursor2{ border: 2px solid #fff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.6); } .cursor2.hover{ background: rgba(255,255,255,.1); box-shadow: 0 0 12px rgba(255, 255, 255, 0.2); } .section{ position: relative; width: 100%; display: block; overflow: hidden; height: 100vh; background-color: #212121; } .case-study-wrapper { position: absolute; top: 50%; left: 50%; z-index: 10; width: auto; margin: 0; padding: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); list-style: none; } .case-study-wrapper .case-study-name a { position: relative; list-style: none; margin: 0; display: block; text-align: center; padding: 0; font-size: 28px; margin-top: 25px; margin-bottom: 25px; font-family: 'Poppins', sans-serif; font-weight: 500; line-height: 1.3; letter-spacing: 2px; color: #ffffff; opacity: 0.5; text-decoration: none; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-wrapper .case-study-name a:hover { text-decoration: none; } .case-study-wrapper .case-study-name.active a { opacity: 1; color: #ffffff; } .case-study-images { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin:0; z-index:2; } .case-study-images li { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; list-style:none; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li .img-hero-background{ position: absolute; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center center; background-repeat:no-repeat; top: 0; left: 0; overflow: hidden; list-style:none; opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li.show .img-hero-background { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .case-study-images li .case-study-title{ position: absolute; bottom: 30px; left: 30px; display: block; opacity: 0; color: #fff; z-index: 19; letter-spacing: 1px; font-size: 14px; font-family: 'Roboto', sans-serif; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; font-weight: 400; line-height: 16px; color: #fff; font-style: italic; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li.show .case-study-title { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .case-study-images li .hero-number-back{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; list-style:none; opacity: 0; font-size: 18vw; font-family: 'Poppins', sans-serif; font-weight: 900; line-height: 1; color: rgba(0, 0, 0, 0.366); z-index: 1; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li .hero-number{ position: absolute; bottom: 40px; left: 50%; width: 40px; margin-left: -70px; display: block; letter-spacing: 2px; text-align: center; list-style:none; opacity: 0; font-size: 13px; font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1; color: #fff; z-index: 6; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li .hero-number-fixed{ position: absolute; bottom: 40px; left: 50%; margin-left: 30px; width: 40px; text-align: center; display: block; letter-spacing: 2px; list-style:none; font-size: 13px; font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1; color: #fff; z-index: 6; } .case-study-images li .hero-number-fixed:before{ position: absolute; content: ''; top: 50%; left: -60px; width: 60px; height: 1px; z-index: 1; background-color: rgba(255,255,255,.4); } .case-study-images li.show .hero-number { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .case-study-images li.show .hero-number-back { opacity: 1; } .dark-over-hero{ position:absolute; width:100%; height:100%; top:0; left:0; z-index:5; background-color: #050505; opacity: 0.2; } .case-study-images li:nth-child(1) .img-hero-background{ background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273889733512138794.jpeg"); } .case-study-images li:nth-child(2) .img-hero-background{ background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.43,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886577881518090.jpeg"); } .case-study-images li:nth-child(3) .img-hero-background{ background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273890280768274555.jpeg"); } .case-study-images li:nth-child(4) .img-hero-background{ background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.5,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886781967958066.jpeg"); } @media (max-width: 991px) { .case-study-images li .hero-number-back{ font-size: 26vw; } } @media (max-width: 767px) { .case-study-wrapper .case-study-name a { font-size: 20px; letter-spacing: 1px; } .case-study-images li .hero-number-back{ font-size: 32vw; } }
JS
Copy
(function($) { "use strict"; document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) { t.style.left = n.clientX + "px", t.style.top = n.clientY + "px", e.style.left = n.clientX + "px", e.style.top = n.clientY + "px", i.style.left = n.clientX + "px", i.style.top = n.clientY + "px" }); var t = document.getElementById("cursor"), e = document.getElementById("cursor2"), i = document.getElementById("cursor3"); function n(t) { e.classList.add("hover"), i.classList.add("hover") } function s(t) { e.classList.remove("hover"), i.classList.remove("hover") } s(); for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) { o(r[a]) } function o(t) { t.addEventListener("mouseover", n), t.addEventListener("mouseout", s) } $(document).ready(function() { $('.case-study-name:nth-child(1)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(1)').addClass("show"); $('.case-study-name:nth-child(1)').addClass('active'); }) $('.case-study-name:nth-child(2)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(2)').addClass("show"); $('.case-study-name:nth-child(2)').addClass('active'); }) $('.case-study-name:nth-child(3)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(3)').addClass("show"); $('.case-study-name:nth-child(3)').addClass('active'); }) $('.case-study-name:nth-child(4)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(4)').addClass("show"); $('.case-study-name:nth-child(4)').addClass('active'); }) $('.case-study-name:nth-child(1)').trigger('mouseenter') }); })(jQuery);