It used to be that animation was only attainable through the likes of Flash or Silverlight. While effective, these solutions required the end user to download a separate browser plugin to view the content. It also required web designers to use specialized software to create that content.
These days, animation is baked right into CSS3 and popular JavaScript libraries such as jQuery (which happens to be included with WordPress). Both are fast, efficient and won’t require any special software to implement or view.
And themes are taking advantage of these new methods to beautiful effect. Let’s explore some WordPress themes that will help you use animation on your website.
If you’re looking for further animation web design ideas, in this article you’ll discover exciting new animation techniques and motion design trends.
Make an Immediate Impact
By default, web pages simply load in all at once. Or, at least, with the prevalence of broadband connections they appear to load that way. It’s not very exciting and something most users take for granted.
Adding some tasteful animation as the page is loading can help grab (and keep) a visitor’s attention. Below are some themes utilizing animation that will immediately keep eyeballs glued to your site.
Content that Rises to the Occasion
A well-done animation that runs as your page loads can really grab a visitor’s attention. The Responsive vCard/Resume theme features animated content that rises up in a silky-smooth fashion.
This Bootstrap theme is perfect for showcasing your talents to prospective clients or employers. Included are support for Google Maps, Font Awesome icons and lots of ways to easily customize the look and layout.
Transition to the Next Phase (or Page)
Showing off your portfolio should be more than just a static group of project listings. BePortfolio uses breathtaking page transitions that will lead visitors on a journey to explore your talents. Whether it’s the revealing curtain effect of the home page or the sweeping manner in which the navigation appears, you’re sure to leave a lasting impression.
Using the included BeDojo plugin, you’ll be able to import your Behance projects right into your WordPress website. Not a Behance user? You can also add projects directly from WordPress as well. Other features include support for Google Web Fonts, custom theme options and blog templates.
Moving Images
Photography is an excellent resource for telling a story and setting the right vibe. Hera lets you combine the power of a great photo with an impressive animation effect. The large “hero” image at the top of the page scrolls horizontally – perfect for showing off that extra-wide picture of real estate or a vacation spot. Animated “light up” text adds an element of color to the mix.
Hera includes several layouts, including the “Moving Image” template featured above. You’ll also get a copy of Visual Composer, a filterable portfolio, parallax scrolling, pricing tables and plenty of ways to customize the theme to your specifications.
Simplicity
Sometimes we think of animation as a big, complicated thing with all sorts of special effects. The truth is that a short, simple animation can be just as effective (if not more so). Infinity uses a simple animation on its slider with text and an image quickly scrolling into view. It’s a nice way to get someone’s attention without trying too hard.
Infinity also provides you with several options for your site’s header and navigation, custom sidebars, various layouts and a user-friendly shortcode generator.
Animation in Unexpected Places
When I was trying out the Evoke theme demo, their use of animation caught me by surprise. The site’s background image (in this case, a photo of a snowy mountain) slowly moved up the page.
Somewhat similar to what the Hera theme above does – only on a grander scale. While this may not work for every type of background image, a beautiful nature scene with muted colors could be nice touch.
Evoke is designed to help promote an app or service. Inside you’ll find the Unyson page builder, animated header images, parallax scrolling effects and pricing tables.
In SVG Animation in Web Design, you’ll learn how SVG images are created and why they’re fantastic for use on the web. You’ll also find a collection of SVG animation tutorials and open source code to help create unique SVG animations from scratch.
Unique Animations that Stand Out
Of course, animations don’t necessarily have to take over an entire page to be effective. Single instances of animation – even a small one – can draw attention to a particular item of interest. And, animations that run after a user interaction (a click, mouseover, etc.) add elegance to any site.
Let’s check out some themes that feature animated elements in different ways. Some are subtle and some even provide unique tools to help you customize the effect.
Build Your Own Animations
While it’s great to take advantage of built-in animations, the more detail-oriented among us might enjoy creating our own. The popular Quasar theme includes a feature called Curvy Slider that will let you customize animations to your heart’s content. You have the ability to plot transition points, change effects and create cool animations that will be unique to your site.
Quasar also sports an Ajax page builder, a form builder, an Ajax portfolio and parallax background images. There is a lot of potential for creating a highly-custom look.
User Activated Elements
Since the days of the JavaScript mouseover, hover effects have played a big role in UI/UX. They not only look good, they also help users to better understand how to navigate a website. Tao is a theme that animates virtually every aspect of the UI – including some nifty user-activated elements like the example above.
Beyond the plethora of animation, Tao features design elements for sliders, photo galleries, lightboxes and videos.
Counting Up Your Accomplishments
As featured here in the Democracy theme, animated elements that “count up” to a specified number have become a very popular way of displaying statistics. As the user scrolls down and the elements come into view, the animated numbers whizzing past call attention to your vital stats.
The theme also includes three different homepage layouts, a selection of five different types of sliders to choose from, Xpress drag and drop page builder and a selection of custom widgets.
Smooth Scrolling
Sometimes animation can do things beyond what we traditionally expect. When using anchor/bookmark links to a specific part of a page, the smooth scrolling effect can be used to slow down the speed of the scroll. This results in a smooth, serene motion. You’ll see it in action with the Profiles theme. On a single-page site, navigating to different sections is akin to a Sunday drive in the country.
Profiles also showcases six home page layouts, a custom header builder, 23 custom WordPress shortcodes and six custom plugins come bundled with the theme.
Not-So-Lazy Load
Lazy load functionality is often used on sites that feature a lot of scrolling content. Here’s how it works: As the user scrolls down, items are dynamically loaded into view. This cuts down on the load time of the page and can make for a better user experience. FoodFarm uses this technique, but implements animation to create a more eye-catching aesthetic. Content appears with fluid animation, which brings both a perception of speed and class to the page.
Built with foodservice or retail stores in mind, FoodFarm also includes six homepage layouts, multiple header and footer styles and is compatible with WooCommerce.
Add Some Motion to Your Message
Looking through the different types of themes above, it becomes clear that animation has really become a staple of modern web design. With the tools and techniques we have at our disposal, adding animation is quite easy. Plus, your website won’t take a performance hit.
CSS3 is one of the greatest leaps forward in modern web development, and these animation code snippets are a testament to the design possibilities at your disposal.
The post The Rise of Subtle Animation in WordPress Themes appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2eJxAuD
envato.com coupon
Tidak ada komentar:
Posting Komentar