Sorry if the question is a bit out of place but don't know any better since i'm a complete beginner.
What i'm trying to say is let's take for example this site
https://exp-ion.lusion.co/
I am trying to "decode" what libraries and technologies are used behind the scene so i can learn more about them and try to replicate the same effects.
Is it in any way possible to get "hints" on how things are done?
Tried looking up the source code, tried inspecting various elements. I get that the scene is done using threejs library. What about the scroll ladder? What about the text?
Thank you in advance for any tips and tricks.
You can try Wappalyzer, they have a browser extension you can install that let's you see most of the technologies used in a site.
Related
I'm kinda stuck. I have to create a portfolio and I have to mostly use html5 and css3, with a bit of js, jquery and stuff if I really want to. I'm not very good at web development but I still wanted to experiment and do a professional and nice site. The thing is, implementing a simple scroll effect on your whole website seems to force you to write the html code on one single index. Does anyone know if this is really the case? Are there other solutions?
Thanks in advance. I know that it is not the smartest question but I'm really not good at it, so sorry in advance. Bye!
(I didn't really try anything yet except from the classic class "scroll-container", which is my main problem : I still want to have several html pages to separate things so that it is clear in my mind. Putting everything on a single webpage will definitely lose me)
use an external library or plugin, such as fullPage.js or Scrollify, which can enable a scroll effect across multiple pages.
I just came cross an impressive portfolio, which you can see here: https://kulbachny.com/
I was wondering, how did he achieve that 'stretched and blurred' effect when moving the cursor hover his image?
I can imagine it has to do with canvas and maybe Three.js/WebGL (not so sure)(?)
I'd love to achieve the same effect, but I guess that's not so simple..
If you know how to do it, could you please explain how something such this can be built?
And if too long to explain, could you refer to good guides or technologies / libraries to study in order to be able to build this kind of animations?
Thanks a lot
I can't see what his own site is build with. But site's of his portofolio are made with TweenMax Javascript framework. You can look up yourself some TweenMax tutorials.
I'm trying to make a transition effect for my website similar to the one that can be found here when you scroll. I've searched high and low and can't seem to find anything even closely related to it. I've started looking through the code on that webpage but I don't really have the time to scour through nearly 50,000 lines of code and test to find the part that I need. The only difference I would make for my site is that I would like the particles to be circles, not squares. Any help that anyone can provide would be greatly appreciated.
The creator of that site it's using Three.js to accomplish that effect. It's not easy to achieve.
These examples might help you but you should learn the basics first.
https://threejs.org/examples/#webgl_modifier_tessellation
https://threejs.org/examples/#webgl_gpu_particle_system
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/