Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Glitch customization for title


totemko

Question

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

10 answers to this question

Recommended Posts

  • 0

Replace   .glitch

with

h1.logo

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

studioseventyfour.com-01-min.png

2. (Tablet-Logos and Branding) Increase logo width?

studioseventyfour.com-02-min.png

3. (Tablet-Social Media) Add a space on right of icon 3?

studioseventyfour.com-03-min.png

4. (Tablet-Photography) Increase button width?

studioseventyfour.com-04-min.png

5. (Mobile-Photography) Place 2 lines on side of button?

studioseventyfour.com-05-min.png

6. (Mobile-Signage) Similar above

studioseventyfour.com-06-min.png

7. (Tablet-Signage) Increase button width?

studioseventyfour.com-07-min.png

8. (Mobile-Green Machine) Remove 1 line?

studioseventyfour.com-08-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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:
 

image.png.2ee0f458f9bccaec71223ba5f2fde39b.png

 

Link to comment
  • 0
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:
 

image.png.2ee0f458f9bccaec71223ba5f2fde39b.png

 

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?

image.thumb.png.7e95ea2a0f8eea8621cd3ab376031355.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...