Pramod kumar (BFA)
Im an artist, Web designer and Developer
jQuery Tutorial. How to create a tooltips with jQuery. Inspiration for Custom Select Elements | Demo 1. Slick - the last carousel you'll ever need. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file.
Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like: Email Client CSS Support | Email Design Reference.
Learnables. The enscroll jQuery Plugin. Easily Customize Scrollbars! Do you have overflowing boxes with scrollbars on your site? Do you wish you could style those scrollbars to offer your users a consistent look & feel across multiple browsers and platforms? Enscroll is a jQuery plugin that gives you the power to replace those scrollbars rendered by the web browser with ones that you design. Either replace the scrollbars with your own image or use custom CSS to style them anyway you desire. Overview Features Documentation Demos Try It Now!
The Basics and Beyond Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet felis at sapien tempor rutrum in in nulla. Cras ac neque dui. Quisque arcu velit, tempor a ultricies consequat, posuere ac purus. Fusce at urna augue. Vestibulum lorem est, vulputate sed vulputate id, bibendum pretium dui. Pellentesque aliquet tellus ut sem placerat mattis. Integer mauris lacus, facilisis eget vehicula a, luctus ac quam. Proin ultrices mauris nunc. Nullam volutpat tempor venenatis.
The Bézier Game. Animatron. Zing Design - We design & develop beautiful websites & mobile apps. Drawing. Ben the Bodyguard. Protecting your data on iPhone® and iPod touch® Welcome to Jarallax.com. What is jarallax? Web based parallax scrolling and much more! Jarallax is an open-source javascript library which makes adjusting css based on interaction easy.With Jarallax it's easy to create a parallax scrolling website.
What to do next Follow Jarallax Support Jarallax. How to create jQuery Parallax Scrolling Effect with 15 Tutorials. Modern templates have many parallax scrolling effect built into them for appealing user interaction and to make sure users find the real call to action sometimes. Most of the time parallax scrolling goes beyond tolerable levels as most people hate to scroll longer than normal levels. Making sure and keeping parallax effects to jaw dropping and tolerable level is what you must learn eventually. jQuery Parallax scrolling effect is achieved easily with many pre made jQuery plugins which you can find with these tutorials. Popular plugins used in these tutorials are Skrollr.js and Stellar.js which seems to be better compared to other existing plugins.
By going through these tutorials you will figure out the steps to make a successful parallax scrolling effect which can be later implemented on your website. Simple parallax scrolling tutorial Demo | Tutorial How to create a parallax scrolling website Demo | Tutorial Creating a Parallax Scrolling Webpage Using Jarallax.js Demo | Tutorial Tutorial Page. jQuery Tutorials for Designers. This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don't know about jQuery, it is a "write less, do more" Javascript library.
It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I'm not going to get into the details of the CSS. Note: the version used in this article is jQuery 1.2.3 View jQuery Demos Download Demo ZIP How jQuery works? First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). How to get the element? Writing jQuery function is relatively easy (thanks to the wonderful documentation). 1.
Let's start by doing a simple slide panel. When an elment with class="btn-slide" is clicked, it will slideToggle (up/down) the <div id="panel"> element and then toggle a CSS class="active" to the <a class="btn-slide"> element. 2. 4a. 4b. 5a. 5b. 6. 7. 8. 9. jQuery Style Tutorial - Awesome jQuery tutorials resource for you! DESIGNIFY.
Twitter Bootstrap. Colour Theory. Demos & Downloads - Part 1. New images on Wookmark. Log in Help Fresh on Wookmark Wookmark is a place for creativity.You should join us. Sign up Save Like Groups: Photography Groups: fun Groups: PJ Groups: veiculos Groups: Celebrity. Video - Dive Into HTML5. You are here: Home ‣ Dive Into HTML5 ‣ Diving In nyone who has visited YouTube.com in the past four years knows that you can embed video in a web page.
But prior to HTML5, there was no standards-based way to do this. Virtually all the video you’ve ever watched “on the web” has been funneled through a third-party plugin — maybe QuickTime, maybe RealPlayer, maybe Flash. HTML5 defines a standard way to embed video in a web page, using a <video> element. But support for the <video> element itself is really only a small part of the story. Video Containers You may think of video files as “AVI files” or “MP4 files.” A video file usually contains multiple tracks — a video track (without audio), plus one or more audio tracks (without video). There are lots of video container formats. MPEG 4, usually with an .mp4 or .m4v extension. Video Codecs When you talk about “watching a video,” you’re probably talking about a combination of one video stream and one audio stream. Theora Audio Codecs Vorbis.
Rcarousel – continuous jQuery UI carousel. Rcarousel development is discontinued at the moment. Maybe If I have more time and feel like it I will resume the work on the project. Anyway I encourage you to share it, fork it and whaterver you feel like. But please – respect the licence. simple to use Now rcarousel is very simple to use. Highly customizable rcarousel does not force you to use one pre-defined theme. Many options to choose from There are many options to choose from. Any element As of 1.1 version you can use hopefully any HTML element inside a carousel. Images with links As of 1.1 version there is no problem with wrapping IMG elements with links. Multiple carousels You can add as many carousels as you like to a page without a problem. Vertical carousels rcarousel supports also vertical orientation of carousels.
Loading elements on demand With the help of append method, you can load elements on demand. Auto mode Thanks to the Auto mode you do not even have to use navigation. cool pagination simple API Then run it: Simple to use. Example of Kendo UI Donut Charts. 100+ Best jQuery Slider Plugins › Free jQuery Plugins. Web Design & Development. Create A Free Online Portfolio Website | Dunked.
Multi-Level Push Menu v2.0.9, This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8). Features Multi-level menu support Endless nesting of navigation elements Expand/Collapse navigation with a left/right swipe gesture Push/Slide DOM elements of choice Left-to-right and Right-to-left sliding directions Flexible, simple markup JS Array input, as HTML markup replacement A number of exposed Options (1 NEW! Added), Methods (3 NEW! Added) and Events Cross-browser compatibility Chrome Midori Firefox Safari IE8+ Opera 12.16 Android Browser 4.1.2 iOS Safari 7.0.1 Video Swiping menus is also supported on desktops using mouse events, but it's more natural to be used on touch devices.
Usage Include the CSS "multilevelpushmenu.css" can be modified to fit website design. FontAvesome (icons) Font I like (use any other you like) Multi-Level-Push-Menu Include the JS jQuery Modernizr (needed for IE8) HTML Markup Initialize Options Demo. Graphics (Illustration, Drawing, Photo,...) Artwork/inspiration. Visual Design. Webdesign. UX & UE | About Interaction. The field of Interaction Design is relatively new compared to other well-established fields like maths or physics. Although quantitative research in the field has made it more science-like, we can hardly say it is pure science. Experiments in science should be reproducible and theorems in science can be strictly proved, but this is hardly realised in user research. IxD – An unmatured field Another manifestation of an new or un-matured field is that people use different terms to refer to the same thing.
In the field of interaction design, people actually speak different dialects of jargons. For example, some people describe what they do as “Interaction Design”, some as “Human Computer Interaction”, some may simple say “User Interface Design”. Well, the last one might be a little bit out of date, since User Interface Design traditionally refer to graphical design. Usability and User Experience If you were asked to give the aim of Interaction Design (or whatever you call it). The Goals 1. 2.