ACTIONpack Posted February 28, 2014 Share Posted February 28, 2014 http://www.mozilla.org/en-US/ Above is the link to the slider, I'm trying to find a tutorial to do that. Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted February 28, 2014 Veteran Share Posted February 28, 2014 Update: http://jsfiddle.net/kx6H7/ Very basic css only example for the animation. Update2: http://jsfiddle.net/kx6H7/2/ Works a bit smoother now ;) Do you need any help with the content? +Zlip792, Steven P., pqt and 8 others 11 Share Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted February 28, 2014 Veteran Share Posted February 28, 2014 http://www.mozilla.org/en-US/ Above is the link to the slider, I'm trying to find a tutorial to do that. Gimme a sec to write it in jsfiddle. Link to comment Share on other sites More sharing options...
0 jamieakers Posted February 28, 2014 Share Posted February 28, 2014 Update: http://jsfiddle.net/kx6H7/ Very basic css only example for the animation. I love the simplicity of your answer, thanks for taking the time to share that :) Draconian Guppy, Dick Montage and Seahorsepip 3 Share Link to comment Share on other sites More sharing options...
0 ACTIONpack Posted February 28, 2014 Author Share Posted February 28, 2014 Update: http://jsfiddle.net/kx6H7/ Very basic css only example for the animation. Update2: http://jsfiddle.net/kx6H7/2/ Works a bit smoother now ;) Do you need any help with the content? WOW, thanks for the coding. You could of give me a link of a tutorial but thanks for taking the time to do it. Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted February 28, 2014 Veteran Share Posted February 28, 2014 WOW, thanks for the coding. You could of give me a link of a tutorial but thanks for taking the time to do it. Looking for a tutorial takes me more time then actually coding it xD MikeChipshop, Brandon H, pqt and 1 other 4 Share Link to comment Share on other sites More sharing options...
0 primexx Posted March 1, 2014 Share Posted March 1, 2014 Looking for a tutorial takes me more time then actually coding it xD it's also really high quality code that's probably better than any tutorial you can google up. Dick Montage 1 Share Link to comment Share on other sites More sharing options...
0 PortalPacific Posted March 2, 2014 Share Posted March 2, 2014 How did you get so good at coding Seahorsepip? Your skills are pretty remarkable for an 18 year old IMO xD Link to comment Share on other sites More sharing options...
0 Dick Montage Posted March 2, 2014 Share Posted March 2, 2014 That's some damned fine CSS MikeChipshop and trieste 2 Share Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted March 2, 2014 Veteran Share Posted March 2, 2014 How did you get so good at coding Seahorsepip? Your skills are pretty remarkable for an 18 year old IMO xD Idkw started writing css and html 5 years ago and now writing, html5, css3, jquery, js, java, php, mysql, nosql etc :P spikey_richie, trieste and PortalPacific 3 Share Link to comment Share on other sites More sharing options...
0 pqt Posted April 17, 2014 Share Posted April 17, 2014 Update2: http://jsfiddle.net/kx6H7/2/ Works a bit smoother now ;) Not entirely sure why you included the classes s1-4. Is that just for allowing individual design edits or habit? It makes no difference design wise otherwise. Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted April 18, 2014 Veteran Share Posted April 18, 2014 Not entirely sure why you included the classes s1-4. Is that just for allowing individual design edits or habit? It makes no difference design wise otherwise. I added these classes for styling each block in a different way, this could also be done with nth-child but I'm more a fan of using classes then using nth-child everywhere. Link to comment Share on other sites More sharing options...
0 ACTIONpack Posted May 2, 2014 Author Share Posted May 2, 2014 Here is my page. Didn't have time to make it responsive. http://adhesivesquares.com/one-page/ Dick Montage 1 Share Link to comment Share on other sites More sharing options...
0 cacoe Posted May 2, 2014 Share Posted May 2, 2014 Wow I'm behind the times. Had no idea this could be done with only CSS now days! Link to comment Share on other sites More sharing options...
0 spikey_richie Posted May 2, 2014 Share Posted May 2, 2014 Where do you stand on AngularJS Seahorsepip? Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted May 3, 2014 Veteran Share Posted May 3, 2014 Where do you stand on AngularJS Seahorsepip? Just another jquery library that's not really necessary to make something work. If it was a precompiler it would have been interesting since we can then look into the actual compiled jquery code and learn from it. It's not that I'm against jquery libraries and js libraries but something to make jquery even more simple is just unnecessary in my opinion. Link to comment Share on other sites More sharing options...
0 pqt Posted January 3, 2015 Share Posted January 3, 2015 Update: http://jsfiddle.net/kx6H7/ Very basic css only example for the animation. Update2: http://jsfiddle.net/kx6H7/2/ Works a bit smoother now Do you need any help with the content? Just to update on this (I'm aware it's been sometime) but there's an issue with the way it sizes itself when you hover over the sections from right to left at a fair speed from what I've found it's only for larger surfaces, not in the jsfiddle itself necessarily. Not earth shattering but I went ahead and updated it with a new version (one I originally made for my personal site). http://jsfiddle.net/toL6oojf/2/ It also has anchors taken into consideration since that's what content features typically are for. Figured I'd share. Link to comment Share on other sites More sharing options...
0 ACTIONpack Posted January 13, 2015 Author Share Posted January 13, 2015 Just an update. I don't work for the company anymore but the graphic designer that work there made some changes to it. Not a good job at it but I can't do anything about it. Wish they call me to change it up. Would have done it for free. :-) When I was finish. http://imagraphicdesigner.com/sample-work/assembly-squares/ When they change it. http://eco-squares.com/ Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted January 13, 2015 Veteran Share Posted January 13, 2015 Just an update. I don't work for the company anymore but the graphic designer that work there made some changes to it. Not a good job at it but I can't do anything about it. Wish they call me to change it up. Would have done it for free. :-) When I was finish. http://imagraphicdesigner.com/sample-work/assembly-squares/ When they change it. http://eco-squares.com/ So they made the hover width wider so it fits more text? (Visitors like lots of long unclear text) Could be worse, like bounce animations Link to comment Share on other sites More sharing options...
0 Seahorsepip Veteran Posted January 13, 2015 Veteran Share Posted January 13, 2015 Just to update on this (I'm aware it's been sometime) but there's an issue with the way it sizes itself when you hover over the sections from right to left at a fair speed from what I've found it's only for larger surfaces, not in the jsfiddle itself necessarily. Not earth shattering but I went ahead and updated it with a new version (one I originally made for my personal site). http://jsfiddle.net/toL6oojf/2/ It also has anchors taken into consideration since that's what content features typically are for. Figured I'd share. Nice, I would probably not use this though on a larger scale like the full bg because this design idea somehow doesn't fit that purpose I think. Link to comment Share on other sites More sharing options...
0 pqt Posted January 23, 2015 Share Posted January 23, 2015 Nice, I would probably not use this though on a larger scale like the full bg because this design idea somehow doesn't fit that purpose I think. It was for a 1400px wide content area (550px in height - then all of it scaled accordingly) I am not going to end up using it after all but it occupied my time so I was happy to give it a shot. I could justify using it in a few cases for a full-page cover but only in some instances. Link to comment Share on other sites More sharing options...
Question
ACTIONpack
http://www.mozilla.org/en-US/
Above is the link to the slider, I'm trying to find a tutorial to do that.
Link to comment
Share on other sites
20 answers to this question
Recommended Posts