I'm looking for a way to implement image effect like the one seen in this website -> http://62models.com/ Is there any existing libraries or can somebody point mo to a right direction for adding this to a web page.
In the development toolbar (Hotkey: F12) on the network tab you can see the files that are loaded when you browse at the site.
I looked through them and found main.min.js which included multiple banners from different javascript libraries. Looking them up I think the page uses PixiJS and StackBoxBlur. (Not sure if imagesLoaded is used.)
FYI: It is always a nice try to load the unminified source, but in this case
main.js doesn't help much.
(My 2 cents: The effect looks nice, but is worthless on touchscreens and is not implemented well for smaller screen width.)
Related
I'm a fairly new and still learning developer and today I came across website that got my interest. http://www.lobagola.com/ I checked the source codes and reviewed what scripts the developer used and discovered Skrollr.
What kind of images did he use? Are they just plain static images or some sort of 3D image I'm not familiar with, how do I achieve this effect using Skrollr? I have read the documentation and I don't believe I came across an example as such.
When in the same situation I typically open the Developer Tools of my Internet Exploer with F12 (yeah, yeah... other browsers got similar tools to do this, you might have to look a bit) and go to the Network tab, which allows you to track all network activity caused by the current web page.
Once enabled (green "play" icon), I hit Ctrl + F5 to force-reload the whole page.
After that I just go through all the files loaded to see whether I can find whatever I'm looking for. You don't have to read code or intepret anything. In this example I've been looking for a movie file or anything similar.
Obviously to not require HTML5, this page uses a "sprite sheet" with the different frames of these animated transitions.
There are also single images, obviously used as placeholders and as a fallback.
When scrolling through the slideshow, the page will calculate an index between 0 and the number of frames in the image file and display that (cut using CSS formatting).
So in Silverlight I've seen an app that had 4 windows together in a box shape. When you click on a window, the windows will rotate to the upper right corner and enlarge while the other 3 shrunk. Then if you click on the enlarged window again, all the windows would go back to their normal size. Now I know all of that can be done in Silverlight (w/XAML and Expression Blend). But what would I use in the HTML/CSS/JS libraries to get the same effect.
Another way of putting it is: if you wanted to have a website with heavy UI razzle-dazzle efects what HTML/CSS/JS libraries would you use or recommend?
You should be able to get a fair approximation of this type of functionality using the jquery UI layout plugin. You will have to write some of your own javascript to get it to do exactly what you mention above, but the framework is definitely there
http://layout.jquery-dev.net/
They have a great page with a lot of good demos to look at.
Take a look at jQuery/jQueryUI. It is commonly used to manipulate DOM and has lots of adding. One of them be what you're looking for.
I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.
I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code
I'm new to stack-overflow and programming so forgive me for any awkward phrasing!
I am building a side-scrolling website which is graphic-rich, and 680x9400px in size. I will be using some javascript and/or mootools to create a cool side-scrolling effect, similar to http://sursly.com.
I am web optimizing all the images used, but would like to know if anyone has any other ideas of how to speed up page loading? Is there any way to pre-load the site in horizontal sections for example?
Thanks in advance.
Using something like the jQuery Lazy Loading Plugin you can get a perceived speedup since only the visible images will be loaded. So they won't compete with off screen images.
I know you'll probably be using mootools, but it'd surprise me if they didn't have something similar.
Notice that most of the graphics on the Sursly site are pure black and white. This makes the site load dramatically faster since the files can be optimized way down.
I agree with Past One's answer, but would modify that slightly: instead of loading it as you need it, load it when you can. That is, initially load nothing but the first page. Once that has loaded, then load the second, then the third and so on.
Keep track of which parts have and have not loaded yet, and if a "page" which hasn't loaded is requested, then display a "please wait" sign and bump that page up the priority queue.
Remember to be careful with these techniques if you're interested in getting indexed by search engines.
Most websites that do this work like Google Maps does. They divide the world (or in your case, the virtual side-scrolling page) into tiles. As the user scrolls, AJAX is used to load the next tile, and it's displayed when the user reaches the edge of the currently visible tile.
You can load more than one not-yet-visible tiles on each side if you want, but it will take more client-side memory for that better user experience.