January 14, 2014

Weebly Tricks #10 - Add a Swinging Photo Effects

Posted by Domz at 1/14/2014

Add a swinging photo effects in Weebly

So you want to create a decent hanging photo with swinging effect? That’s possible and very easy! You can
place it in your Weebly sites in just few minutes. This should help you decorate your online store and attracts visitors. You can add up to 3 photos with such effect. Anyway you can always experiment with the code. Try to mix it with your background like black to black or find a photo with transparent background for an awesome effect.








1. Prepare the photos to be used, I suggest you should use 200x200 photo sizes. Upload them to your CSS by using the "add new item" in the Design Tab.

2. Now search for the <head>, again read my article about editing the <head>. Below it paste the following code and save.

<style>

.swing{
-webkit-animation:swinging 10s ease-in-out 0s infinite;
-moz-animation:swinging 10s ease-in-out 0s infinite;
animation:swinging 10s ease-in-out 0s infinite;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
transform-origin:50% 0;
}

@-webkit-keyframes swinging{
0% { -webkit-transform: rotate(0); }
5% { -webkit-transform: rotate(10deg); }
10% { -webkit-transform: rotate(-9deg); }
15% { -webkit-transform: rotate(8deg); }
20% { -webkit-transform: rotate(-7deg); }
25% { -webkit-transform: rotate(6deg); }
30% { -webkit-transform: rotate(-5deg); }
35% { -webkit-transform: rotate(4deg); }
40% { -webkit-transform: rotate(-3deg); }
45% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
0% { -moz-transform: rotate(0); }
5% { -moz-transform: rotate(10deg); }
10% { -moz-transform: rotate(-9deg); }
15% { -moz-transform: rotate(8deg); }
20% { -moz-transform: rotate(-7deg); }
25% { -moz-transform: rotate(6deg); }
30% { -moz-transform: rotate(-5deg); }
35% { -moz-transform: rotate(4deg); }
40% { -moz-transform: rotate(-3deg); }
45% { -moz-transform: rotate(2deg); }
50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(10deg); }
10% { transform: rotate(-9deg); }
15% { transform: rotate(8deg); }
20% { transform: rotate(-7deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-5deg); }
35% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { transform: rotate(0); }
}

</style>

3. We can now insert images using the "embed code" element. Go to "Build" drag one "embed code" and used the following code in it.

<img class="swing" src="http://theweeblytricks.weebly.com/files/theme/crying.gif" />


<img class="swing" src="http://theweeblytricks.weebly.com/files/theme/crying.gif" style="
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
"
/>

<img class="swing" src="http://theweeblytricks.weebly.com/files/theme/crying.gif" style="
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
"
/>

4. You just need to change the bold text with your website address and name of the photo respectively. Publish your site and check for its new and cool appearance. 

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

2 comments:

  1. Oh sorry, I figured that out but where do you insert the image link?

    ReplyDelete
    Replies
    1. For better support, please open this on the forum. Thank you.

      Delete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top