Glitch customization for title

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)
    }
}

Replace   .glitch

with

h1.logo

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

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

@tuanphan

If I wanted this glitch effect for the "SEO SERVICES" text, what should I do? 

Thanks

https://www.studioseventyfour.com/seo-landing-page

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>

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?

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:
 

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?

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

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;
}
}