jQuery - Designbeep https://designbeep.com Free Resources for Designers and Developers Tue, 03 Apr 2018 07:52:24 +0000 en-US hourly 1 Rough.js – Create Hand-Drawn and Sketchy Like Graphics https://designbeep.com/2018/03/26/rough-js-create-hand-drawn-and-sketchy-like-graphics/ Mon, 26 Mar 2018 09:21:41 +0000 http://designbeep.com/?p=67258 Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. If you have Workly imported on your web page (~1k only), RoughJS will automatically offload all processing to a web worker – freeing up your main UI thread. This is great when creating complex drawings using RoughJs like maps. Rough.js View All Free Tools

The post Rough.js – Create Hand-Drawn and Sketchy Like Graphics first appeared on Designbeep.

]]> Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

If you have Workly imported on your web page (~1k only), RoughJS will automatically offload all processing to a web worker – freeing up your main UI thread. This is great when creating complex drawings using RoughJs like maps.

[gpp_button color=”blue” url=”http://roughjs.com/” title=”hand drawn graphics” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Rough.js[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Rough.js – Create Hand-Drawn and Sketchy Like Graphics first appeared on Designbeep.

]]> Sticky Sidebar – A Pure JavaScript Plugin For Smart Sticky Sidebars https://designbeep.com/2017/10/19/sticky-sidebar-a-pure-javascript-plugin-for-smart-sticky-sidebars/ Thu, 19 Oct 2017 07:38:45 +0000 http://designbeep.com/?p=65905 Sticky Sidebar is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+. Sticky Sidebar does not re-calculate all dimensions when scrolling, just necessary dimensions. It handles the sidebar when is tall or too short compared to the rest of the container and integrated with resize sensor to re-calculate all dimensions of the plugin when size of sidebar

The post Sticky Sidebar – A Pure JavaScript Plugin For Smart Sticky Sidebars first appeared on Designbeep.

]]> Sticky Sidebar is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+.

Sticky Sidebar does not re-calculate all dimensions when scrolling, just necessary dimensions. It handles the sidebar when is tall or too short compared to the rest of the container and integrated with resize sensor to re-calculate all dimensions of the plugin when size of sidebar or its container is changed.

[gpp_button color=”blue” url=”https://abouolia.github.io/sticky-sidebar/” title=”sticky sidebar” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Sticky Sidebar – Demo & Source[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Sticky Sidebar – A Pure JavaScript Plugin For Smart Sticky Sidebars first appeared on Designbeep.

]]> Fitty – Perfect Text Resizing With Javascript https://designbeep.com/2017/07/31/fitty-perfect-text-resizing-with-javascript/ Mon, 31 Jul 2017 10:01:41 +0000 http://designbeep.com/?p=65216 Fitty is a Javascript plugin that scales up (or down) text so it fits perfectly to its parent container. It’s ideal for flexible and responsive websites. Features: – No dependencies – Easy setup – Optimal performance by grouping DOM read and write operations – Works with WebFonts – Min and max font sizes – Support for MultiLine – Auto update when viewport changes – Monitors element subtree and updates accordingly Fitty View All Free Tools

The post Fitty – Perfect Text Resizing With Javascript first appeared on Designbeep.

]]> Fitty is a Javascript plugin that scales up (or down) text so it fits perfectly to its parent container. It’s ideal for flexible and responsive websites.

Features:

– No dependencies
– Easy setup
– Optimal performance by grouping DOM read and write operations
– Works with WebFonts
– Min and max font sizes
– Support for MultiLine
– Auto update when viewport changes
– Monitors element subtree and updates accordingly

[gpp_button color=”blue” url=”https://rikschennink.github.io/fitty/” title=”WYSIWYG editor” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Fitty[/gpp_button]

[gpp_button color=”black” url=”http://designbeep.com/category/resources/” title=”free tools” icon_left=”external” target=”_blank” size=”medium” display=”inline”]View All Free Tools[/gpp_button]

The post Fitty – Perfect Text Resizing With Javascript first appeared on Designbeep.

]]> Billboard.js – Re-usable Easy Interface JavaScript Chart Library https://designbeep.com/2017/06/26/billboard-js-re-usable-easy-interface-javascript-chart-library/ Mon, 26 Jun 2017 05:59:44 +0000 http://designbeep.com/?p=64949 billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+. Chart generation is super easy. With detailed options, you can create chart instantly. Billboard.js works on D3 v4+ and every code was written as ESM(ES Module) with ES6+ syntax. Billboard.js is forked project of the popular C3.js. You can migrate with the minimal change of your code, taking all the advantages which billboard.js brings. billboard.js provides the easiest way to create ‘chart’ instantly. Demos    Billboard.js

The post Billboard.js – Re-usable Easy Interface JavaScript Chart Library first appeared on Designbeep.

]]> billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+. Chart generation is super easy. With detailed options, you can create chart instantly. Billboard.js works on D3 v4+ and every code was written as ESM(ES Module) with ES6+ syntax. Billboard.js is forked project of the popular C3.js. You can migrate with the minimal change of your code, taking all the advantages which billboard.js brings. billboard.js provides the easiest way to create ‘chart’ instantly.

[gpp_button color=”blue” url=”https://cdn.rawgit.com/naver/billboard.js/8413325d/demo/” title=”JavaScript Chart Library” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demos[/gpp_button]    [gpp_button color=”blue” url=”https://naver.github.io/billboard.js/” title=”JavaScript Chart Library” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Billboard.js[/gpp_button]

The post Billboard.js – Re-usable Easy Interface JavaScript Chart Library first appeared on Designbeep.

]]> Typography Animations and Letter (hover) Effects https://designbeep.com/2017/06/14/typography-animations-and-letter-hover-effects/ Wed, 14 Jun 2017 07:53:38 +0000 http://designbeep.com/?p=64872 This is a couple of ideas for typography animations and letter (hover) effects for playful interactions developed by Codrops. You can find awesome text animations that you can use in your web projects. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. The below examples have been created using anime.js. and Charming.js So just see the demo and find out how to create such effects. Live Preview    

The post Typography Animations and Letter (hover) Effects first appeared on Designbeep.

]]> This is a couple of ideas for typography animations and letter (hover) effects for playful interactions developed by Codrops. You can find awesome text animations that you can use in your web projects.

Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out.
The below examples have been created using anime.js. and Charming.js

So just see the demo and find out how to create such effects.

[gpp_button color=”blue” url=”https://tympanus.net/Development/LetterInteractions/” title=”css letter” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Live Preview[/gpp_button]    [gpp_button color=”blue” url=”https://tympanus.net/codrops/2017/06/07/some-letter-effects-and-interaction-ideas/” title=”css letter” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Download[/gpp_button]

The post Typography Animations and Letter (hover) Effects first appeared on Designbeep.

]]> Item Reveal Animations with SVG https://designbeep.com/2017/05/29/item-reveal-animations-with-svg/ Mon, 29 May 2017 07:53:18 +0000 http://designbeep.com/?p=64792 This is an experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js. It’s been developed by Codrops. These effects can look quite interesting on image grids, covering and uncovering every grid item when navigating. The idea was sparked by the beautiful and creative JOHO’s website. The main idea is to use fitting coupled effects that work well with each other, and to play with organic looking shapes. Using SVG paths allows to specify several steps for the animation which leaves us with virtually endless possibilities. Demo  

The post Item Reveal Animations with SVG first appeared on Designbeep.

]]> This is an experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js. It’s been developed by Codrops.

These effects can look quite interesting on image grids, covering and uncovering every grid item when navigating. The idea was sparked by the beautiful and creative JOHO’s website.

The main idea is to use fitting coupled effects that work well with each other, and to play with organic looking shapes. Using SVG paths allows to specify several steps for the animation which leaves us with virtually endless possibilities.

[gpp_button color=”blue” url=”https://tympanus.net/Development/ItemRevealer/” title=”SVG” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”https://tympanus.net/codrops/2016/06/29/item-reveal-animations-with-svg/” title=”SVG” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]

The post Item Reveal Animations with SVG first appeared on Designbeep.

]]> Stack Motion Hover Effects With CSS and jQuery https://designbeep.com/2017/03/20/stack-motion-hover-effects-with-css-and-jquery/ Mon, 20 Mar 2017 09:00:53 +0000 http://designbeep.com/?p=64295 This is an experimental hover effects that reveal a stack of multiple colored cards behind the hovered item. It’s been developed by Codrops. The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. Demo    Source

The post Stack Motion Hover Effects With CSS and jQuery first appeared on Designbeep.

]]> This is an experimental hover effects that reveal a stack of multiple colored cards behind the hovered item. It’s been developed by Codrops.

The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion.

[gpp_button color=”blue” url=”https://tympanus.net/Development/StackMotionHoverEffects/” title=”Hover Effect” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”https://tympanus.net/codrops/2017/03/15/stack-motion-hover-effects/” title=”Hover Effect” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]

The post Stack Motion Hover Effects With CSS and jQuery first appeared on Designbeep.

]]> GridTab – A jQuery plugin to create grid based responsive tabs https://designbeep.com/2017/03/08/gridtab-a-jquery-plugin-to-create-grid-based-responsive-tabs/ Wed, 08 Mar 2017 08:45:20 +0000 http://designbeep.com/?p=64200 GridTab is a lightweight jQuery plugin to create grid based responsive tabs. Girdtab could be a perfect solution for the following UI design pattern. Gridtab supports two layout modes grid and tab. By default, it uses the grid layout. Click any tab in demo and resize the window to see how it works. Features: – Responsive – Lightweight and based on CSS3 flexbox – Set Grid for each breakpoint – Switch between Grid and Tab layout – Next, previous and close controls – Scroll to current tab – Custom selectors – Right-To-Left Support

The post GridTab – A jQuery plugin to create grid based responsive tabs first appeared on Designbeep.

]]> GridTab is a lightweight jQuery plugin to create grid based responsive tabs. Girdtab could be a perfect solution for the following UI design pattern. Gridtab supports two layout modes grid and tab. By default, it uses the grid layout. Click any tab in demo and resize the window to see how it works.

Features:

– Responsive
– Lightweight and based on CSS3 flexbox
– Set Grid for each breakpoint
– Switch between Grid and Tab layout
– Next, previous and close controls
– Scroll to current tab
– Custom selectors
– Right-To-Left Support

[gpp_button color=”blue” url=”https://gopalraju.github.io/gridtab/” title=”GridTab” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source & Demos[/gpp_button]

The post GridTab – A jQuery plugin to create grid based responsive tabs first appeared on Designbeep.

]]> Search UI Effects With CSS and Javascript https://designbeep.com/2017/02/18/search-ui-effects-with-css-and-javascript/ Sat, 18 Feb 2017 07:50:29 +0000 http://designbeep.com/?p=64007 This is a couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations developed by Codrops. You will explore some different layouts combined with some engaging CSS animations. The demos all have a schematic look and almost all of them show the search interface when clicking on the search icon that is always placed in the top right corner of the page (except for demo 2 where the search UI alters with an animation once the input is focused). The demos serve only as proof-of-concepts and inspirational ideas for UI interactions. Made

The post Search UI Effects With CSS and Javascript first appeared on Designbeep.

]]> This is a couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations developed by Codrops. You will explore some different layouts combined with some engaging CSS animations. The demos all have a schematic look and almost all of them show the search interface when clicking on the search icon that is always placed in the top right corner of the page (except for demo 2 where the search UI alters with an animation once the input is focused).

The demos serve only as proof-of-concepts and inspirational ideas for UI interactions. Made with modern CSS properties; for fierce browsers only.

[gpp_button color=”blue” url=”https://tympanus.net/Development/SearchUIEffects/” title=”Search UI Effects” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”https://tympanus.net/codrops/2017/02/08/inspiration-search-ui-effects/” title=”Search UI Effects” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]

The post Search UI Effects With CSS and Javascript first appeared on Designbeep.

]]> Video Template – A Full-screen Video Presentation For Mobile https://designbeep.com/2016/12/26/video-template-a-full-screen-video-presentation-for-mobile/ Mon, 26 Dec 2016 09:37:03 +0000 http://designbeep.com/?p=63715 This is a full-screen video presentation, that is resized and animated to become the content of a mobile device. It’s been developed by Codyhouse. It can be used to introduce a product or a feature of an app and turns into content for a mobile device. Before using this template you should consider 1) whether the video would be a great selling point or not, and 2) whether you expect many returning visitors, or the goal is just to let the user download the app and (almost) never come back. If the answers to these questions are 1) YES and

The post Video Template – A Full-screen Video Presentation For Mobile first appeared on Designbeep.

]]> This is a full-screen video presentation, that is resized and animated to become the content of a mobile device. It’s been developed by Codyhouse. It can be used to introduce a product or a feature of an app and turns into content for a mobile device.

Before using this template you should consider 1) whether the video would be a great selling point or not, and 2) whether you expect many returning visitors, or the goal is just to let the user download the app and (almost) never come back. If the answers to these questions are 1) YES and 2) No, then this template will come in handy for you.

video-template-for-mobile-devices

[gpp_button color=”blue” url=”https://codyhouse.co/demo/immersive-video-template/index.html” title=”Video Template” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”https://codyhouse.co/gem/immersive-video-template/” title=”Video Template” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]

The post Video Template – A Full-screen Video Presentation For Mobile first appeared on Designbeep.

]]>