Jump to content

Glitch customization for title

Recommended Posts

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
  • Replies 10
  • Views 1.1k
  • Created
  • Last Reply
  • 1 month later...

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.