WordPress landing page

WordPress landing page

Adam

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

So I recently found out that you can animate SVG just by putting a <style></style> tag with some animation right inside your SVG file. I have been having quite a bit of fun with that! I created this landing page recently with some simple animations (clouds & lights in header, floating super hero).

adamgreenough.me

Emergency WordPress Support from £15 | No Fix No Fee | Adam Greenough 🦸🏼‍♂️

Online Now! Affordable prices from just £15 for a one-off fix. I’m a WordPress expert from the UK with over 10 years of experience in fixing and maintaining WP websites.
adamgreenough.me

Would really appreciate your feedback as always! 🙂

The bases for the illustrations were acquired from:
Secure cloud storage metaphor flat illustration by BoykoPictures on Envato Elements
Night city by the mountains - vector illustration by BoykoPictures on Envato Elements

 
Gummibeer

Gummibeer

Astroneer
Moderator
Local time
16:06
Joined
Oct 5, 2019
Messages
1,177
Pronouns
he/him

You can also animate SVGs with a simple animateTransform or similar tags.


Studio Polster

Wir sind ein kleines leistungsstarkes Designstudio in Aumühle, Hamburg. Wir bieten: Grafikdesign, Corporate Design, Editorial Design, Webdesign, Illustration, Infografik, Fotografie, Naming, Logo-Entwicklung, Kommunikation im Raum und digitale Markenentwicklung.
studiopolster.de studiopolster.de

 
Adam

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

Gummibeer said:
You can also animate SVGs with a simple animateTransform or similar tags.

Studio Polster

Wir sind ein kleines leistungsstarkes Designstudio in Aumühle, Hamburg. Wir bieten: Grafikdesign, Corporate Design, Editorial Design, Webdesign, Illustration, Infografik, Fotografie, Naming, Logo-Entwicklung, Kommunikation im Raum und digitale Markenentwicklung.
studiopolster.de studiopolster.de
Click to expand...
Yeah that way is definitely a bit more slick! I stuck with embedded CSS for browser support though which is basically universal for a long time. Looking forward to animateTransform becoming more widely acceptable! Can I use... Support tables for HTML5, CSS3, etc

 
Gummibeer

Gummibeer

Astroneer
Moderator
Local time
16:06
Joined
Oct 5, 2019
Messages
1,177
Pronouns
he/him

My benefit: I never care about users using browsers not supporting the current technology. It's the users fault and I also blame him for not using one of the browsers doing a good job. So every issue from Safari, IE or Edge users is immediately muted. :D

 
Talia

Talia

Member
Local time
09:06
Joined
Jan 21, 2020
Messages
84

Looks excellent. Great graphics and visual design, nice subtle animations, and the superhero motive is really fun. I bet you'll get some business with it. :)

My only criticism is that, I think for accessibility, you should always have a way to pause animations. Not to say I always follow that myself, but it's something to consider.

 
Last edited:
Adam

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

Talia said:
Looks excellent. Great graphics and visual design, nice subtle animations, and the superhero motive is really fun. I bet you'll get some business with it. :)

My only criticism is that, I think for accessibility, you should always have a way to pause animations. Not to say I always follow that myself, but it's something to consider.

Click to expand...
Thanks so much! Great point on accessibility. I do have it on my to-do list to make use of the prefers-reduced-motion media query to turn those off. 🙂

 
R

RobinHood

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

Adam said:
So I recently found out that you can animate SVG just by putting a <style></style> tag with some animation right inside your SVG file. I have been having quite a bit of fun with that! I created this landing page recently with some simple animations (clouds & lights in header, floating super hero).

adamgreenough.me

Emergency WordPress Support from £15 | No Fix No Fee | Adam Greenough 🦸🏼‍♂️

Online Now! Affordable prices from just £15 for a one-off fix. I’m a WordPress expert from the UK with over 10 years of experience in fixing and maintaining WP websites.
adamgreenough.me

Would really appreciate your feedback as always! 🙂

The bases for the illustrations were acquired from:
Secure cloud storage metaphor flat illustration by BoykoPictures on Envato Elements
Night city by the mountains - vector illustration by BoykoPictures on Envato Elements

Click to expand...

That's awesome!

Here's the code for anyone interested like I was:

Code: 
    <style>
        g#hero {
            animation: float 3s ease-in-out infinite;
            margin-left: -10px;
        }
        
        g#wave {
            animation: float2 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% {
                transform: translateY(4px) translateX(-8px);
            }
              
            50% {
                transform: translateY(-4px) translateX(-6px);
            }
            
            100% {
                transform: translateY(4px) translateX(-8px);
            }
        }
        
        @keyframes float2 {
            0% {
                transform: translateY(-3px) translateX(5px);
            }
              
            50% {
                transform: translateY(3px) translateX(3px);
            }
            
            100% {
                transform: translateY(-3px) translateX(5px);
            }
        }
    </style>

So how did you go about executing this once you had the art?

Did those parts of the image already have the ID? if not, how did you find them etc? What was your workflow.

I've literally just finished designing a little testimonials page for a site with a load of svg graphics. It would be ace to be able to add some movement to it!

 
Adam

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

RobinHood said:
That's awesome!

Here's the code for anyone interested like I was:

Code: 
    <style>
        g#hero {
            animation: float 3s ease-in-out infinite;
            margin-left: -10px;
        }
      
        g#wave {
            animation: float2 3s ease-in-out infinite;
        }
      
        @keyframes float {
            0% {
                transform: translateY(4px) translateX(-8px);
            }
            
            50% {
                transform: translateY(-4px) translateX(-6px);
            }
          
            100% {
                transform: translateY(4px) translateX(-8px);
            }
        }
      
        @keyframes float2 {
            0% {
                transform: translateY(-3px) translateX(5px);
            }
            
            50% {
                transform: translateY(3px) translateX(3px);
            }
          
            100% {
                transform: translateY(-3px) translateX(5px);
            }
        }
    </style>

So how did you go about executing this once you had the art?

Did those parts of the image already have the ID? if not, how did you find them etc? What was your workflow.

I've literally just finished designing a little testimonials page for a site with a load of svg graphics. It would be ace to be able to add some movement to it!

Click to expand...
Thanks! I put the items in to groups (g) in Affinity Designer the graphics editor simply using the layers panel and when saving as SVG the elements stay with those ids. I believe the same works for illustrator. I run all SVG through SVGOMG - SVGO's Missing GUI as well to optimise them a bit for web. :)

 
Last edited:
R

RobinHood

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

Sweet, will give that ago on this new page I've been working on, super happy with the transformation a few high quality vector graphics can do to a page.

Getting a single vector pack on a certain topic that lead me down a really nice creative design path this evening, now I've just got to figure out how to make it work on a real page 🙈

 
Last edited:
Adam

Adam

Mr. Webwide
Administrator
Local time
15:06
Joined
Sep 24, 2019
Messages
1,259
Pronouns
he/him

RobinHood said:
Sweet, will give that ago on this new page I've been working on, super happy with the transformation a few high quality vector graphics can do to a page.

Getting a single vector pack on a certain topic that lead me down a really nice creative design path this evening, now I've just got to figure out how to make it work on a real page 🙈

Click to expand...
Can't wait to see it! 😄

 
R

RobinHood

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

Adam said:
Can't wait to see it! 😄
Click to expand...

It's getting there :D

 
R

RobinHood

Member
Local time
15:06
Joined
Jan 6, 2020
Messages
26

Forgot to post an update to this, you can see all my animation fun live on this page now :)

Got:

  • Swaying grass
  • Moving waterfall
  • Moving water fountain
  • Flying owl
  • Swaying hose
  • Swaying plant leaves

prestigemarble.co.uk

Testimonials - Prestige Marble Company London

Read what people are saying about their experience with Prestige Marble London
prestigemarble.co.uk

 
tobyx

tobyx

🌱
Local time
16:06
Joined
Oct 6, 2019
Messages
9
Pronouns
he/him

Many great tips in this topic.

Adam, that looks great.
RobinHood, that also looks great.

 
Top