2. How to Create a Fade In, a Slide Up, and a Zoom In Effect
  1. 7m 15s
    Feb 01, 2015

In this tutorial we demonstrate how to add some animation to your DNN skins, and give you the ability to employ these smart effects throughout your site.

We teach you how to create several reusable rollover effects using robust CSS3 transitions and we walk you through how to apply these effects to a 2SexyContent Portfolio app that we created in a previous tutorial.

We will teach you how to modify the 2SexyContent app so that each portfolio item can be configured to use a different transition effect.

This video contains:

  • Adding the effects CSS class
  • Adding useful commented sections in skin.css
  • How to create the before state for the fade in effect
  • How to create the after state for the fade in effect
  • Implementing the CSS3 transition
  • How to create a slide up effect
  • How to create a zoom in effect
Tags:
dnn6 dnn7 skin advanced css3
Author:
Andy Stephenson

About 2015 Edition

3h 50m 37s All Jan 01, 2015

DNN Video Tutorials posted during 2015

Tags:
css3 dnn6 dnn7 3rd party module advanced bootstrap build a website integration newsletter seo skin
Author:
Andy Stephenson
Back

Try FREE
30 days money back guaranteed