codrops / fullscreenlayoutpagetransitions

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

FullscreenLayoutPageTransitions

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

article on Codrops

demo

Licensed under the MIT License

fullscreenlayoutpagetransitions's Issues

Jump straight to a section (Anchor)

Hi There, i
t's a really lovely template. I'm thinking about using it for a faq-page. At the moment im trying to figure out how to jump to a particular section. F.e. if the user clicks on a hyperlink in another text...

do you guys have a solution?

Thx and best wishes
B

[enhancement] Add missing bower.json.

Hey, maintainer(s) of codrops/FullscreenLayoutPageTransitions!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library codrops/FullscreenLayoutPageTransitions is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "codrops/FullscreenLayoutPageTransitions",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Main icons

For example, the "bl-icon-close", where is it getting the icon? how can i change it?

Not an issue....

Thanks for the design. I appreciate your hard work. Here is my customization. http://dev.mym5realty.com/

More Work Panels

Hello, I wonder to know how can I put the four boxes as Work Sections. Thanks.