I'm looking for directions rather than any specific code (wich I wouldn't spit on neither ;))
I have to code a portfolio for a friend, something like the first following picture (Sorry I only had Paint on the computer I'm asking with) :
The images should either be disposed and able to stay proportional whatever the screen size is or get arranged based on the screen size. So that the screen is always full and no need to scroll in any direction.
Then, as on the second picture of the linked album...
When clicking on a picture on the start screen, I'd like to open the screen in half and display the rest of the project. The rectangle you see up the second screen is supposed to be the same as in the center of the first one, supposed again to be the name of the portfolio. Of course I should be able to close it to get back to the page showcasing all the projects.
The effect I'm looking for is something similar to the about section here, but the other way :
http://www.b--i--g.com/about/
To sum up,
How to dynamically layout images full screen(s).
How to split in half the main screen and display other things in it.
I'm guessing here there is some keys javascripts doing all the magic so, again, any leads on wich scripts to use you know of or wich html/css structure is the best suited to do that kind of things.
I just don't have, this time, the time to start over multiples times (again) and scratch all over my code trying to make a victorian chimney blow white steam.
can you create a http://jsfiddle.net/ or http://plnkr.co/ to start with.
if you have an example webpage then you can just look at its source.
To sum up,
How to dynamically layout images full screen(s). - not clear what that means but, absolute positioning + javascript
How to split in half the main screen and display other things in it. - there are many ways to achieve that effect. in the link you sent, they are being overlapped by the middle content. image is rendered twice on either side and the middle content right half and left half of left and right image respectively.
please post a plunker to have other help you without creating the page from scratch.
Related
So essentially what I am looking to do is have a section that has a solid background at some point on my page, and at the top of that a pair of sunglasses that as you begin to scroll, the reflection of the sunglasses changes from a few different images, as well as some text changes below the sunglasses to match each change in the sunglasses. Then once the final image is scrolled through, you reach a new section with different information. I am not entirely sure what this effect is called or how to achieve it, though I am guessing it will require a significant amount of jquery.
An existing website that demonstrates the effect I am trying to achieve is https://software.dakno.com/ with the phone effect in the second area down the page. (I do not own this site nor am I affiliated with the owners). I used chrome developer tools to figure out how it is working, but didn't get too far.
The site that I am working on is http://zack2171.github.io . This is an example site I am using to practice css and web design. The second section is where I am trying to get this effect to work. If someone could help me out a bit and give me some pointers, that would be great. Thanks
To achieve your goal, your definitely looking towards a mixture of jQuery and css. Most of your time will be dedicated towards the scroll position and at what pixel (Scroll distance) is covered to showing your images/text. I would start to align your image that you want in a position that is either fixed or absolute, to give you a better adjustment. Then start to play around with jQuery's Scroll Position. My personal approach would be to to detect the distance scrolled and after reaching those milestones (Half a page / 3/4 of a page) you would use jQuery to verify the position and then display those extra materials you want to show. I hope this kind of let you onto a good starting path.
Quick example, scroll down within the script below and check the console it logs!
$(window).scroll(function() {
console.log($(window).scrollTop());
})
.box {
background-color:#333;
height:5000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I am currently working on an app with a friend and we need to make it so that an image will fall when the image below it disappears. So it needs to like take the images place when it disappears. Any ideas on how to do this?
jQuery would be a good starting point for this. Presumably you're hiding the image with JavaScript to begin with, so add code to the same function that loops through all of the images above it and moves them down to fill the gap (possibly using .animate()).
Are you sure you want to move the images down, though? That will leave an odd blank space at the top of the screen, where there's no image left to fall from above. Images "falling" upwards when the image above them vanishes would make more sense on most HTML pages.
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
I've looked at loads of different sliders and haven't found anything that accomplishes what the designer would like. The image below should help explain. Note that there is space above and below the slider for header/footer content.
A. Basically the idea is for the next image (2) to be partially visible on the right using a certain amount of screen space, say 10%.
B. The current image (1) floats to the left and fills the height - it may be a wide or narrow image.
C. The amount of space shown in light gray will depend on the user's available screen space. When the images reach full resolution, then the gap will expand as needed.
D. In reverse, as the available space shrinks the gap will shrink, and
E. After the gap has reached a minimum size, the slides shrink.
F. Then the current slide (1) will start to be clipped from the left & right if needed (wide images).
G. For the animation, the next slide (2), slides over to fill the gap and then bumps the current slide (1) out, leaving a gap before pulling the next image partially in.
Is there a slider that already does something similar, or do I need to modify an existing one? If so, what would be a good starting point? I've tried ones like Flexslider, but the JS resizing interferes with getting two on the screen.
No image posting privs yet, so here it is: http://imgur.com/swYtr
Try this one out....
Cool carousel
Check out the examples given more on the Site....it might help out your Query.
here's another one
http://jsfiddle.net/JCQ6Q/15/
All the best.
Vote up if it helps you. :)
I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
There is already a similar question, but it didn't help me a bit ^^
Custom scroll bar behavior in Javascript?
All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)
That's a pretty cool website ;)
Basically using some javascript you can detect how far a person has scrolled. Considering the amount of scrolling you can move the contents of your webpage around if their position is absolute.
There are a couple of jQuery plugins that allow you to do simular stuff although I'm not sure you can "scroll through" a sequence of coordinates.
Here are a couple of jQuery plugins that helps you get simular effects:
http://johnpolacek.github.com/scrolldeck.js/
http://johnpolacek.github.com/scrollorama/
http://demos.flesler.com/jquery/scrollTo
http://webdev.stephband.info/parallax.html
I just picked a couple I'm familiar with but there are many plugins that are alike.
edit:
Decided to add some more simular websites for your pleasure.
http://www.activatedrinks.com
http://www.beetle.de
http://www.nikebetterworld.com
the whole page is an "overlay" - a full width and height wrapper <div>. sort of how modal windows do their "full page shadow" effect and have a small div float inside. the whole page content is in that wrapper. the scroll path is a script. the script captures the body scroll and moves the contents of the div accordingly to the positions provided by the script. with a body long enough to be scrollable (which cannot be seen since the wrapper covers the whole page), it's as if you are scrolling sideways, upwards etc.
an analogy is a modal window. the wrapper is the full-page shade. the modal window is the content. and notice how modal windows stick to the middle? that's using a script to calculate it's position to stay in the middle by moving the modal window down, relative to the page's top. but in that website's case, they move in different directions.
It doesn't seem too complicated.
Using the .scroll(function() {}) in jQuery you listen for a scroll event. When triggered you set the position style (left, top) of the content div to give the appearance of moving sideways instead of down.
I guess you'll need overflow:none property on the div to prevent users from scrolling over the area you don't want them to see.
Sounds like a lot of effort for a clunky user interface in my opinion.