Tutorial Concept Photography Website

 VIEW DEMO                   DOWNLOAD SOURCE

Tutorial photography website layout.
The concept is based on a slider of several photo stacks using Flickity and once a stack is opened, it slides up and reveals its content. The background image will react to the mouse movement, creating a tilt-like motion illusion inspired by the effect seen on The DNA project, the interactive album site by j.viewz. Once a stack is opened, the background image will transform into a small, logo-like circle and move up. This effect is inspired by Alexey Oksanchenko’s animated Dribbble shot of a profile image animation.

Please note that this is very experimental and made to work with modern browsers. IE does not deal well with viewport units which we are using in some transforms, so you might not see the sliding effect of the content.

 

 

 

 

We are using Flickity by David DeSandro under the terms of the GNU GPL license v3.
Please note that if you want to use Flickity to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a Flickity Commercial License at flickity.metafizzy.co.

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Flickity under the terms of the GPLv3. Read more about Flickity’s license.
The camera icons are made by Freepik from www.flaticon.com and they are licensed under CC BY 3.0

Tutorial Realtime Chat with Node.js

Demo                 Download

In this tutorial, we are going to build a realtime chat system with Node.js and the socket.io library. The chat permits users to create private chat rooms that they can share with a friend. For avatars, we will use gravatar. You can run the chat locally with node, or push it to heroku or a different cloud service provider.

The code

You can grab the source code from the download button above. It has plenty of comments and is easy to follow. Start with the app.js file and read from there. Here are a few things to look for:

• All dependencies are declared in the package.json file. They are not included in the zip and you will have to run npm install to get them.
• We are using separate JavaScript files for the configuration and routes, to make the code more manageable.
• In the routes file, socket.io stores the username, avatar and room of the person as properties of the socket object itself. This saves us a lot of code and makes managing rooms easy.
• We use socket.io‘s rooms feature to isolate one chat from another, which is exactly what that feature was developed for.

The design

The PSD for this tutorial is available for free in our members area, along with other goodies that you will love. Become a member here!

Running the chat

To run the chat, you need to have node.js installed, so that the node and npm commands can be called from your terminal. Download the code and unzip the archive to a folder called nodejs-private-webchat. After this, navigate to the folder you’ve created from your terminal:

cd nodejs-private-webchat/

Running the ls (or dir if you are on windows) command should show app.js, package.json and the other files from the archive. Then, run this command to download all the libraries that the chat system uses:

npm install

This will install all the dependencies that are described in package.json. This may take one or two minutes. When it’s done, run the following command to start your very own local chat, which you can see on http://localhost:8080

node app.js

Hit ctrl+c to stop it. The bad news is that you can’t invite your friends to your chat, since it is running on your own computer. To fix this, you need to run it on a web server. Setting up a web server by yourself to run node is not a very straightforward process and involves a good deal of server administration skills. Luckily, it is very easy to get started with cloud platforms like Heroku, which is what I will show you next.

Hosting the chat on Heroku

Heroku is a cloud hosting platform that automates the deployment and scaling of web apps. It offers a free plan, which is sufficient for less busy apps like our chat. Here is what you need to do:

1. Create an account, if you don’t have one already.
2. Install the heroku toolbelt for your operating system. It will give you access to the heroku command from a terminal window.
3. Initialize an empty git repository (explained below)
4. Push your code to heroku. This will deploy it and give you a URL which you can share with your friends.

You can also read this getting started guide, followed by this guide about running node.js applications.

Creating a git repo

The heroku toolbelt installs the heroku command and the git version control system. You need to create a git repo in order to be able to deploy your app to heroku (there is no ftp here). To do this, run this command:

git init

Then, we need to tell git not to include the node_modules folder to your repo. This folder can grow quite large and it simply does not belong in git. To ignore the folder, create a new empty text file named .gitignore with the following content:

node_modules/

Now you can commit your code to your fresh new repo! Write these commands:

git add .
git commit -m 'Initial commit'

There is one last thing that we have to do. Heroku requires that your application has a text file named Procfile, which contains the command used to start your node.js app. Create it, and add the following content:

web: node app.js

Then commit the changes with these commands:

git add Procfile
git commit -m 'Added a procfile'

We are now ready to push the application to heroku!

Pushing to Heroku

The following two commands are only done the first time you start using the heroku utility. First you need to login to heroku from the command line tool:

heroku login

Then, you need to add your ssh key, so you can push code without entering a password:

heroku keys:add

Next, you need to create a new heroku application from the code in this folder:

heroku create

And finally, we are ready to push code! Type this command:

git push heroku master

This line will send your application code to heroku, where their servers will process your package.json file and install all libraries that your app needs. Do this every time you need to upload a new version of the code (you must have made a commit beforehand). All that is left, is to enable websockets so that our real-time chat can work (read more here):

heroku labs:enable websockets

To open your very own web chat in your browser run this command:

heroku open

This will open it in a tab in your default browser.

Tutorial Make Simple Stack Effects

View demo                Download source

 

This is tutorial make simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect.

 

 

 

 

You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration. One can imagine a couple of triggers for these effects: item hover, on load, on scroll and on click effects. When using some subtle, but creative moves, we can make some interesting effects that elevate a static design. Note that for some of the effects we use perspective and 3D transforms so they will only work in modern browsers.
The beautiful illustrations are by Isaac Montemayor. Check out his Dribbble profile, he’s an awesome illustrator.
The markup is the following:

1 2 3 4 5 6

<figure class="stack stack-sidegrid">     <img src="img/1.png" alt="img01"/>     <img src="img/3.png" alt="img03"/>     <img src="img/4.png" alt="img04"/>     <img src="img/2.png" alt="img02"/> </figure>

We use a figure with three or four images.
All images, except for the last one, will be absolute:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.stack {     margin: 20px auto;     width: 400px;     padding: 0;     position: relative;     max-width: 100%; }   .stack img {     max-width: 100%;     position: absolute;     top: 0;     left: 0;     transition: all 0.3s; }   .stack img:last-child {     position: relative; }

Setting one of the images to position relative will give our parent figure a height.
 

 An example effect is the following:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/* Bouncy Grid */ .stack-bouncygrid.active img {     transform: scale(0.48); }   .stack-bouncygrid.active img:nth-child(4) {     transform-origin: 0 0; }   .stack-bouncygrid.active img:nth-child(3) {     transform-origin: 100% 0; }   .stack-bouncygrid.active img:nth-child(2) {     transform-origin: 0 100%; }   .stack-bouncygrid.active img:first-child {     transform-origin: 100% 100%; }

This effect moves the items to the corners and scales them down.
Note that for some of the examples (grids), we simply set the width of the images to something smaller. You’d of course use a accordingly sized image.
source: http://tympanus.net/codrops/2014/03/05/simple-stack-effects/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tympanus+%28Codrops%29 

Tutorial Make Flappy Bird in HTML5 - Part 1

Check it out Here

Thomas Palef will show you how to create Flappy Bird in HTML5 as part of his "one html5 game per week" challenge.

 Tutorial make a Flappy Bird in HTML5 

About 2 months ago I set myself a challenge: build one new HTML5 game per week on lessmilk. So far I have 9 games available. Since I started a lot of people have asked me to write about how to make games. In this post we will see how to make a Flappy Bird in HTML5.

What browser am I using?

Check it out here

What browser am I using?
is fantastic web app that will make it easy to know what browser your client or anybody is using.
You're using Firefox 27.
Share this with your support team!

Browser details 
This information may help support representatives resolve any issues you're experiencing with their website.
Operating system Windows 7
Cookies enabled Yes
Flash version 12.0.0
Java version 1.7.0_09
Browser size 1349 x 664
Screen size 1366 x 768
Color depth 24 bit

Your full user agent string is: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0

Tutorial New Technique For Hiding Overflowing Text

Demo                          Download

This is Tutorial New Technique For Hiding Overflowing Text. As web developers, we should build our sites so they accommodate variable lengths of text. You have to be sure that your markup looks just as good with a 50 character username as it does with a 5 character one. In the past, this was only possible by slicing text on the server side, or with JavaScript, but today we can do it only with CSS thanks to properties like max-width and text-overflow.
In this short tutorial, I will show you my new favorite technique which fades overflowing text gracefully into the background.

The Idea

By setting a max-width value, overflow:hidden and an :after pseudo element, we can achieve the effect that you can see in the demo. Here is what each of these will help us with:

• The element will increase its width freely, until it hits the value set by max-width.
• At that point, all excess text will be hidden thanks to the overflow:hidden property.
• To prevent the text from breaking to a new line, we use white-space:nowrap.
• To create a smooth transition between the text and the background color of the element, we will use an :after pseudo element. This element will have a linear-gradient that goes from transparent to the color of the background. This element is positioned to the right of the container, and becomes visible only when the element expands.

I find this technique better looking than the plain text-overflow:ellipsis as more of the text is actually shown, and it blends nicely with the design of the page. However it comes at the cost that it takes more lines of CSS, and you have to manually set the maximum width. In some cases, the extra effort is worth it when the goal is a cleaner design.

The Code

To set the stage, we should first write a few lines of HTML:

index.html

<input type="text" value="This text will expand" />
<h2><span id="elem" class="overflow-300"></span> and this will shift to the side.</h2>

The text input is only needed in order to give the visitor the ability to change the content easily, otherwise they would have to use their browser’s developer tools. The element which has the overflow technique applied, is the #elem span. I have given it a class called overflow-300, which we will use to implement the technique in our CSS.

assets/css/styles.css

h2 span{
    font-weight:bold;
    display:inline-block;
    vertical-align: top;
}

A thing to keep in mind, is that we can not set a width or max-width on an element which is set to display:inline (the default display of span elements). This necessitates that we give it a display of inline-block. And here is the technique itself:

.overflow-300{
    overflow:hidden;
    max-width:300px;
    position:relative;
    white-space: nowrap;
}

.overflow-300:after{
    content:'';
    position: absolute;

    left:300px;
    margin-left: -40px;
    width: 40px;
    height:100%;
    top:0;
    background:linear-gradient(to right, rgba(240, 244, 245, 0), rgba(240, 244, 245, 1));
}

If you were to change the max width of the element, you would also need to change the left value of the :after element.
Lastly, we have some jQuery that will listen for the text input event on the textbox, and update the contents of the span:

assets/js/script.js

$(function(){

    var elem = $('#elem'),
        textbox = $('input[type=text]');

    textbox.on('input', function(){
        elem.text(textbox.val());
    });

    textbox.trigger('input');
});

With this, our sweet text overflow technique is ready! Do you have suggestions or other handy techniques? Share them in the comment section.

Tutorial Fullscreen Overlay Effects

DEMO         DOWNLOAD

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects for overlays. The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes.
Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. You should, of course, provide some kind of fallback for older browsers.
An example for a subtle, yet interesting effect is the first one which got inspired by the same effect on Huge. The idea is to fade in the overlay and to rotate what’s inside slightly in 3D:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.overlay-hugeinc {     opacity: 0;     visibility: hidden;     transition: opacity 0.5s, visibility 0s 0.5s; } .overlay-hugeinc.open {     opacity: 1;     visibility: visible;     transition: opacity 0.5s; } .overlay-hugeinc nav {     perspective: 1200px; } .overlay-hugeinc nav ul {     opacity: 0.4;     transform: translateY(-25%) rotateX(35deg);     transition: transform 0.5s, opacity 0.5s; } .overlay-hugeinc.open nav ul {     opacity: 1;     transform: rotateX(0deg); } .overlay-hugeinc.close nav ul {     transform: translateY(25%) rotateX(-35deg); }

We use the visibility trick to make the overlay disappear completely: we set a transition delay for the visibility property which allows the opacity to be transitioned first.

Tutorial Facebook's Paper photo tilt feature in HTML5

Check it Out HERE

 

John Tregoning created a HTML5 clone of the photo tilt feature found in Facebook's Paper app.

One advantage that native currently has over the mobile web is that there is no way to stop the device from changing orientation (portrait/landscape) when tilting too much. There is an experimental feature: Screen.lockOrientation but currently only works in Firefox for web pages that are in full-screen mode.

Finally, here is a working demo. Make sure you test this on a device with a triaxial/accelerometer, like a phone/tablet, with orientation locked in portrait mode.