STYLE SWITCHER

Jquery

18 web design trends for 2017

18 web design trends for 2017

As we look forward to 2017 — a year that hopefully won’t be plagued by the passing of so many of the world’s greatest artists and performers — the big question on every designer’s mind has to be: what will define design in 2017?
So with that in mind, I decided to ask Webflow’s own designers what trends they think will dominate the world of digital design in 2017. (And wrote up a little commentary on their thoughts.) First, let’s hear from Webflow’s Chief Design Officer, Sergie Magdalin.
Sergie Magdalin, Chief Design Officer at Webflow
‍Sergie Magdalin, Chief Design Officer at Webflow

Layouts that let content shine

The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading

The last few years have seen a sea change in how people view design’s role in business. Design has shifted from a late-in-the-process “optimization” stage where designers swooped in to sprinkle on some “pretty” like mystical fairy dust to a real competitive advantage.

It’s been an amazing evolution to watch.

And a fascinating element of that evolution has been the shift back toward a focus on content: the meat on the bones of the web. Designers worldwide have realized that people visit websites for their content — whether it’s raging tweetstorms, thoughtful long-reads, or the latest “user-generated” meme — and that design’s ultimate role is to present content in an intuitive, efficient, and “delightful” way.

That’s one reason for the shift away from skeuomorphic design toward “flatter,” more minimalist design approaches, as seen in Google’s Material aesthetic, and really, across the web and our various devices.

Of course, as Newton’s third law states, for every action, there’s an equal and opposite reaction. Many designers feel that the flat design trend has taken the “soul” out of design. We expect to see this conversation continue across 2017, but look forward to it becoming a productive dialogue that never loses sight of the heart of our design work: the content.

Better collaboration between designers, and between designers and developers

As design has taken a greater and more influential role in shaping businesses, more and more attention has been paid to designers’ collaboration with both their fellow designers, and their developer colleagues.

The emphasis on designer collaboration has arisen in part from the massiveness of the web and mobile apps we’re building these days. Gigantic platforms like Google, Facebook, Twitter, and LinkedIn require not only huge design teams working on disparate aspects of the platform, but also better ways for designers to stay on the same page — and that means more collaboration, and better communication.

All kinds of tools have arisen to help facilitate that collaboration, from the shared templates and dashboards in Webflow’s Team plan to the real-time, shared canvas of Figma — and you can bet 2017 will bring both improvements to those platforms, and all-new options.

On the designer-developer collaboration front, lots of attention has been focused on the all-important handoff stage. Where designers used to hand off massive packages of static images and specs, they’re now sharing dynamic visualizations enabled by tools like InVision, Marvel, and UXPin — or doing one better by exporting real, production-ready code from Webflow.

Read Article
More
Responsive Google Plus Widget

Responsive Google Plus Widget

<div class="gp-wrap" id="gp-wrap">
<div class="g-page" data-href="https://plus.google.com/102226233421872956936" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
// this guy right here
document.getElementsByClassName('g-page')[0].setAttribute('data-width', document.getElementById('gp-wrap').clientWidth);
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div> 
More
Plupload – JavaScript API for Building File Uploaders

Plupload – JavaScript API for Building File Uploaders

Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight.
Website
More
DisplayJS – Simple JavaScript Framework for Building Ambitious UIs

DisplayJS – Simple JavaScript Framework for Building Ambitious UIs

DisplayJS is a simple JavaScript framework for building ambitious UIs. DisplayJS helps you to efficiently render the DOM.
Website
More
Markvis – Make Visualization in Markdown

Markvis – Make Visualization in Markdown

Markvis is a plugin to generate charts in markdown with few lines of code.
Website
More
Flubber – Tools for Smoother Shape Animations

Flubber – Tools for Smoother Shape Animations

Flubber is a library to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation.
Website
More
Prevent scrolling of parent element – Jquery

Prevent scrolling of parent element – Jquery

Please ensure that you are include jquery.mousewheel.js
<!DOCTYPE html> 
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
 * { padding: 0; margin: 0; }
 html { min-height: 1000%; }

 #toolbox {
 overflow: auto;
 position: fixed;
 top: 100px;
 left: 200px;
 width: 200px;
 height: 300px;
 background: #ccc;
 }
</style>

</head>
<body>

 <div id="toolbox">
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 </div>

 <script src="https://rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.js"></script>

</body>
</html>

$(function() {

 var toolbox = $('#toolbox'),
 height = toolbox.height(),
 scrollHeight = toolbox.get(0).scrollHeight;

 toolbox.bind('mousewheel', function(e, d) {
 if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
 e.preventDefault();
 }
 });

});
Example

Another example

$('div').on( 'mousewheel DOMMouseScroll', function (e) {

var e0 = e.originalEvent;
var delta = e0.wheelDelta || -e0.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
Website
More
SmartPhoto.js – Responsive Image Viewer for Mobile Devices

SmartPhoto.js – Responsive Image Viewer for Mobile Devices

SmartPhoto.js is an easy to use responsive image viewer especially for mobile devices.

Features

  • Intuitive gestures such as pinch-in/pinch-out/drag/swipe
  • Use Accelerometer to move images
  • Accessible from keyboard
  • Show pictures via URL hash When the page is loaded
  • Can make photo groups
Website
More
Fade HTML5 audio (adjust volume) using jQuery (window).scroll

Fade HTML5 audio (adjust volume) using jQuery (window).scroll

$(document).ready(function() {
    var audioElm = $('#soundTour').get(0);
    audioElm.play();

    var height = $(document).height() - $(window).height();

    $(window).scroll(function() {
        audioElm.volume = 1 - $(window).scrollTop() / height;
        console.log(audioElm.volume);
    });
});​
More
Moon – A minimal, blazing fast user interface library.

Moon – A minimal, blazing fast user interface library.

A minimal, blazing fast user interface library. Weighing in at 5kb minified + gzipped, Moon is one of the lightest libraries out there.
Website
More