nickleb Posted September 28, 2020 Share Posted September 28, 2020 Site URL: https://mango-harmonica-5r95.squarespace.com/aboutme Hi there, My code seems to work on codepen for the hover effect (changes to the blue color). But when I input it on my website, I get everything except the hover/color change effect to work. Here's my code: https://codepen.io/nickleb/pen/yLOrORo Thanks! Link to comment
tuanphan Posted September 28, 2020 Share Posted September 28, 2020 You used your own html or this html? <!-- First section --> <header> <h1 class="animated bounceInDown"><a href="#">View my work</a></h1> <span class="animated bounce"></span> </header> It seems you changed h1 to h4. If you did this, change all h1 in Codepen code to h4 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
nickleb Posted September 29, 2020 Author Share Posted September 29, 2020 On 9/28/2020 at 1:21 AM, tuanphan said: You used your own html or this html? <!-- First section --> <header> <h1 class="animated bounceInDown"><a href="#">View my work</a></h1> <span class="animated bounce"></span> </header> It seems you changed h1 to h4. If you did this, change all h1 in Codepen code to h4 Hi! Yes I just noticed my careless mistake. Oops! I changed it on my Squarespace site so now it does work but no matter what I change the transition timing to, it moves at the same speed. I changed it from 275ms ease to 5ms ease and it's still the same? It's super slow and I'm not sure what I'm doing wrong! Thanks @tuanphan My code on Squarespace is the same with the updated h4 tag: <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head> <body> <center><h4 class="animated bounceInDown"><a href="#selected-works">View my work</a></h4> <span class="animated bounce"></span></center> </body> <style> h4 { font-family: 'Rubik', sans-serif; overflow-x: hidden; color: #000; font-size: 24px; font-weight: 600; padding-bottom: 70px; padding-left: 30px; text-decoration: none; } h4 a { position: relative; color: #7500FF; overflow: hidden; background: linear-gradient(to right, #000, #000 50%, #7500FF 50%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; transition: background-position 275ms ease; text-decoration: none; } a:hover { background-position: 0 100%; } span.animated { position: absolute; bottom: 50px; width: 0px; height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 30px solid #7500FF; animation-duration: 2.5s; animation-iteration-count: infinite; } header span::before, header span::after { position: absolute; content: ""; height: 0px; width: 0px; } span::before { left: -10px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } span::after { right: -10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> // Scroll function courtesy of Scott Dowding; http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling $(document).ready(function() { // Check if element is scrolled into view function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return elemBottom <= docViewBottom && elemTop >= docViewTop; } // If element is scrolled into view, fade it in $(window).scroll(function() { $(".scroll-animations .animated").each(function() { if (isScrolledIntoView(this) === true) { $(this).addClass("fadeInLeft"); } }); }); // Click Animations $("button").on("click", function() { /* If any input is empty make it's border red and shake it. After the animation is complete, remove the shake and animated classes so that the animation can repeat. */ // Check name input if ($("#name").val() === "") { $("#name") .addClass("form-error animated shake") .one( "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() { $(this).removeClass("animated shake"); } ); } else { $("#name").removeClass("form-error"); } // Check email input if ($("#email").val() === "") { $("#email") .addClass("form-error animated shake") .one( "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() { $(this).removeClass("animated shake"); } ); } else { $("#email").removeClass("form-error"); } // Check message textarea if ($("#message").val() === "") { $("#message") .addClass("form-error animated shake") .one( "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() { $(this).removeClass("animated shake"); } ); } else { $("#message").removeClass("form-error"); } }); }); </script> Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.