totemko Posted January 21, 2021 Share Posted January 21, 2021 Site URL: https://www.matthieulorrain.com/ Hi all! I am trying to implement a glitch effect on hover for my title. I have been using the following code but somehow it does not seem to work. "logo." seems to be the right selector, but the glitch effect is not functional for me in square space Any idea how to fix this? site: matthieulorrain.com template: avenue initial code in code pen: https://codepen.io/kkhenriquez/pen/PGvmjm CSS: .logo { &:before, &:after { display: block; content: attr(data-glitch); text-transform: uppercase; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8; } &:after { color: #f0f; z-index: -2; } &:before { color: #0ff; z-index: -1; } &:hover { &:before { animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both 5 } &:after { animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both 5 } } } @media only screen and (max-width: 400px) { .glitch { font-size: 3em; } } @keyframes glitch { 0% { transform: translate(0) } 20% { transform: translate(-5px, 5px) } 40% { transform: translate(-5px, -5px) } 60% { transform: translate(5px, 5px) } 80% { transform: translate(5px, -5px) } to { transform: translate(0) } } Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 Replace .glitch with h1.logo Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Brianne_113 Posted February 24, 2021 Share Posted February 24, 2021 Hi Totemko, I'm just wondering if you had any success with creating the glitch effect on hover on your logo on squarespace. I have been trying to successfully do that but have only just started learning CSS for the purpose of this website and have been struggling to create the glitch on hover effect. If you could provide any tips on how to do this, I would greatly appreciate it. Thank you, Brianne brianne.alexis113@gmail.com Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 On 2/24/2021 at 12:43 PM, Brianne_113 said: Hi Totemko, I'm just wondering if you had any success with creating the glitch effect on hover on your logo on squarespace. I have been trying to successfully do that but have only just started learning CSS for the purpose of this website and have been struggling to create the glitch on hover effect. If you could provide any tips on how to do this, I would greatly appreciate it. Thank you, Brianne brianne.alexis113@gmail.com Can you share link to page where you use effect? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
S74 Posted May 16, 2021 Share Posted May 16, 2021 (edited) @tuanphan If I wanted this glitch effect for the "SEO SERVICES" text, what should I do? Thanks https://www.studioseventyfour.com/seo-landing-page Edited May 16, 2021 by S74 adding link Link to comment
tuanphan Posted May 18, 2021 Share Posted May 18, 2021 On 5/17/2021 at 6:09 AM, S74 said: @tuanphan If I wanted this glitch effect for the "SEO SERVICES" text, what should I do? Thanks https://www.studioseventyfour.com/seo-landing-page Add a Code Block >> paste this code <h1 class="glitch" data-glitch="Explore">Explore</a> <style> .glitch { font-size: 8.125em; font-family: "Raleway", sans-serif; font-weight: 700; text-decoration: none; text-transform: uppercase; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color: #fff; letter-spacing: 5px; } .glitch:before, .glitch:after { display: block; content: attr(data-glitch); text-transform: uppercase; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; } .glitch:after { color: #f0f; z-index: -2; } .glitch:before { color: #0ff; z-index: -1; } .glitch:hover:before { -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 5; animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 5; } .glitch:hover:after { animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both 5; } @media only screen and (max-width: 400px) { .glitch { font-size: 3em; } } @-webkit-keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(-5px, -5px); } 60% { transform: translate(5px, 5px); } 80% { transform: translate(5px, -5px); } to { transform: translate(0); } } @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(-5px, -5px); } 60% { transform: translate(5px, 5px); } 80% { transform: translate(5px, -5px); } to { transform: translate(0); } } </style> S74 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted May 21, 2021 Share Posted May 21, 2021 On 5/17/2021 at 6:09 AM, S74 said: @tuanphan If I wanted this glitch effect for the "SEO SERVICES" text, what should I do? Thanks https://www.studioseventyfour.com/seo-landing-page Do you need to fix these issues? Site URL – https://www.studioseventyfour.com/ 1. (Tablet-Footer) Align 2 lines? 2. (Tablet-Logos and Branding) Increase logo width? 3. (Tablet-Social Media) Add a space on right of icon 3? 4. (Tablet-Photography) Increase button width? 5. (Mobile-Photography) Place 2 lines on side of button? 6. (Mobile-Signage) Similar above 7. (Tablet-Signage) Increase button width? 8. (Mobile-Green Machine) Remove 1 line? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
S74 Posted May 28, 2021 Share Posted May 28, 2021 Thanks @tuanphan I will look into those issues! I appreciate your help. I'm still having trouble with the glitch code though. I'm not sure how to add padding to the top and bottom of the text, also if the text goes onto two lines it doesn't sit right. I'm using the code below: Link to comment
tuanphan Posted May 28, 2021 Share Posted May 28, 2021 9 hours ago, S74 said: Thanks @tuanphan I will look into those issues! I appreciate your help. I'm still having trouble with the glitch code though. I'm not sure how to add padding to the top and bottom of the text, also if the text goes onto two lines it doesn't sit right. I'm using the code below: Add to Design > Custom CSS /* seo services text */ div#block-yui_3_17_2_1_1622174704051_21046 { margin-top: 30px; margin-bottom: 30px; } I see it is on one line here. Did you solve? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
S74 Posted May 31, 2021 Share Posted May 31, 2021 (edited) Hi @tuanphan It looks great on the SEO page thank you! But on the photography landing page the text falls onto two lines rather then one. Is the a way to get it onto one line? (your amazing by the way) studioseventyfour.com/photo-video-landing-page Edited May 31, 2021 by S74 Link to comment
tuanphan Posted June 1, 2021 Share Posted June 1, 2021 On 5/31/2021 at 10:56 AM, S74 said: Hi @tuanphan It looks great on the SEO page thank you! But on the photography landing page the text falls onto two lines rather then one. Is the a way to get it onto one line? (your amazing by the way) studioseventyfour.com/photo-video-landing-page Add to Design > Custom CSS @media screen and (min-width:992px) { h1.glitch { white-space: nowrap !important; } } S74 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment