Conor Bailey
Conor Bailey
  • 106
  • 1 395 874
Vanilla JavaScript: Infinite Scroll Slider With Parallax Effect
Hi guys,
Back with another video where we will be creating an infinite scroll slider effect that works great on all devices. This implementation uses vanilla JavaScript. It a long video as I try to explain all the concepts as much as I can.
Code here: github.com/conorbailey90/device-friendly-infinite-scroll-slider-
Many thanks for watching and please subscribe.
Conor
Переглядів: 1 072

Відео

Vanilla JavaScript Snapping Slider
Переглядів 7422 місяці тому
Hi guys, Back with another video where we will be creating a vanilla JavaScript slider. Code here: github.com/conorbailey90/snapping-slider/tree/main Thanks Conor
Introduction to PostgreSQL
Переглядів 2312 місяці тому
Hi guys, Back with a different kind of video. This is an introduction to PostgreSQL which is an extremely popular open source SQL database used in many large applications today. It's something I have wanted to implement for a while in order to build more interesting web applications. In this video we will be installing Postgres from scratch. We will then create a new database, add tables and in...
JavaScript Particles Animation on Mouse Move
Переглядів 3,1 тис.5 місяців тому
Hi guys, Back with another video where will be creating a particles animation effect which responds to the mouse move event. Inspiration taken from this website: creativedirectiondesign.com/ Special thanks to Frank for his amazing tutorial on animating particles: ua-cam.com/video/vAJEHf92tV0/v-deo.html Code here: github.com/conorbailey90/particles I hope you enjoy. Thanks Conor
JavaScript: Futuristic Menu Hover Effect With Random Character Animation
Переглядів 1,9 тис.5 місяців тому
Happy New Year Guys! Back with another video where we will be implementing a futuristic link hover effect with a random character animation. This is made using purely HTML, CSS and JavaScript. Code here: github.com/conorbailey90/futuristic-hover-effect Thanks for watching and please subscribe. Conor
JavaScript: Custom Smooth Scroll With Image Reveal / Parallax Effect
Переглядів 1,7 тис.6 місяців тому
Hi guys, back with another video where we will be implementing our own custom smooth scroll with an image reveal and parallax effect. Code here: github.com/conorbailey90/smooth-scroll-parallax-reveal Many thanks and please subscribe for more videos. Conor
THREE JS: Preserving Texture Aspect Ratio With Shaders
Переглядів 8587 місяців тому
Hi guys, Github repo reference in the video here: github.com/conorbailey90/webgl-preserve-texture-aspect-ratio
Snapping Image Slider with Scaling Effect Made with HTML, CSS and JavaScript
Переглядів 1,5 тис.7 місяців тому
Hi guys, Back with another video where we creating a scaling image slider which works on all devices. We will be using plain HTML, CSS and JS. Code here: github.com/conorbailey90/scaling-image-slider Thanks for watching! Conor
Mini Course Part 3: AWWWARDS Remade - Form Studio - Sticky Blog Posts with HTML, CSS and JavaScript
Переглядів 2,2 тис.8 місяців тому
Hi guys, Back with the final video of this 3 part AWWWARDS Remade mini course where we are recreating the scroll effects on the Form Studio website: formstudio.site/ In this video we will implementing the sticky blog panels, the circular scroll animation as well as the text reveal animations using the native JavaScript Intersection Observer API. Many thanks for watching and please subscribe if ...
Mini Course Part 2: AWWWARDS Remade - Form Studio - Horizontal Scroll with HTML, CSS and JavaScript
Переглядів 2,5 тис.8 місяців тому
Hi guys, Back with the second part of this AWWWARDS Remade mini course we are looking to recreate the scroll effects on the Form Studio website: formstudio.site/ In this video we will create the video text overlay animation as well as the Project section which implements a horizontal scroll. We will also refactor our previous code to optimise for mobile devices and will also add linear interpol...
Mini Course Part 1: AWWWARDS Remade - Form Studio - Video Scale on Scroll With HTML, CSS and JS
Переглядів 5 тис.8 місяців тому
Hi guys, Back with a multipart series where we are looking to recreate the scroll effects on the Form Studio website: formstudio.site/ In this video we will create the hero, about and video sections. We will also be implementing the video scale to viewport transformation on scroll. We will only be using vanilla JavaScript for this project. FINAL SOURCE CODE HERE: github.com/conorbailey90/form-c...
AWWWARDS Remake: - Creating An Inverted Curved Border Layout With HTML and CSS Only
Переглядів 5 тис.8 місяців тому
Hi guys, Back with an AWWWARDS remake video where we be looking into the front end techniques used to develop the hero section of the following website: www.cutthecode.com/ We will be utilising HTML, CSS and SVG Clip Path to create a unique curved layout. I hope you enjoy. Thanks. Conor
JavaScript: Implementing Horizontal and Vertical Scrolling on a Single Webpage
Переглядів 19 тис.Рік тому
Hi guys. Back with another video where we will be implementing vertical and horizontal scrolling on a single webpage. We will be using the CSS sticky positioning attribute and Vanilla JavaScript to achieve this effect. Please like the video and subscribe if you want to see more tutorials like this! Thanks all! Conor
JavaScript: Smooth Scroll with Pixelated Hover Effects
Переглядів 2,9 тис.Рік тому
Hi guys, Back with another video where we will be creating a smooth scroll effect with vanilla javascript. Lerp function explained here: ua-cam.com/video/rcz6qvx-igs/v-deo.html Code here: conbailey90.gumroad.com/l/pixelatedsmoothscroll Thanks for watching. Conor
Simple JavasScript Accordion (FAQ Section)
Переглядів 957Рік тому
Hi guys, Back with a quick tutorial on how to create a simple accordion using HTML, CSS and JS. Hope you enjoy. Thanks Conor
Vanilla javaScript: Text Reveal Effect On Scroll
Переглядів 7 тис.Рік тому
Vanilla javaScript: Text Reveal Effect On Scroll
Vanilla JavaScript: Pixelated Image Reveal Effect on Scroll
Переглядів 1,9 тис.Рік тому
Vanilla JavaScript: Pixelated Image Reveal Effect on Scroll
Vanilla JavaScript Particles Landing Page with Animated Splash Screen
Переглядів 2,8 тис.Рік тому
Vanilla JavaScript Particles Landing Page with Animated Splash Screen
JavaScript Animated Project Grid With Smooth Transitions
Переглядів 2,9 тис.Рік тому
JavaScript Animated Project Grid With Smooth Transitions
TypeScript: Animated Landing Page
Переглядів 3,3 тис.Рік тому
TypeScript: Animated Landing Page
How To Create a 3D Panel Blur Effect on Scroll with JavaScript
Переглядів 3 тис.Рік тому
How To Create a 3D Panel Blur Effect on Scroll with JavaScript
JavaScript Random Text Reveal Effect
Переглядів 6 тис.Рік тому
JavaScript Random Text Reveal Effect
JavaScript Pixelated Menu Effect
Переглядів 3,5 тис.Рік тому
JavaScript Pixelated Menu Effect
JavaScript Webpage Minimap
Переглядів 4,1 тис.Рік тому
JavaScript Webpage Minimap
Vanilla JavaScript: Circles Animation and Layered Project Section Layout
Переглядів 2,5 тис.Рік тому
Vanilla JavaScript: Circles Animation and Layered Project Section Layout
Vanilla Javascript: SVG Curve Hamburger Menu Tutorial
Переглядів 3,5 тис.2 роки тому
Vanilla Javascript: SVG Curve Hamburger Menu Tutorial
Vanilla JavaScript: Masonry Grid Layout
Переглядів 11 тис.2 роки тому
Vanilla JavaScript: Masonry Grid Layout
Vanilla JavaScript: Creating a Cool Pixelated Image Reveal Effect on Hover
Переглядів 7 тис.2 роки тому
Vanilla JavaScript: Creating a Cool Pixelated Image Reveal Effect on Hover
JavaScript: Create A Device Friendly Product Slider With Progress Bar
Переглядів 6 тис.2 роки тому
JavaScript: Create A Device Friendly Product Slider With Progress Bar
HTML / CSS / JavaScript: Cool 3D Rotate Text On Hover Effect
Переглядів 10 тис.3 роки тому
HTML / CSS / JavaScript: Cool 3D Rotate Text On Hover Effect

КОМЕНТАРІ

  • @NomanAli-zd1bn
    @NomanAli-zd1bn 6 днів тому

    I really like all of your video please like us beginners can you make Javascript tutorials

    • @ConorBailey
      @ConorBailey 4 дні тому

      Hi mate. Thanks for your comment. Yes I will be posting a full course soon which will cover the JavaScript fundamentals. I will also be creating a full website with it it with some cool animations using pure vanilla JavaScript. Thanks for your support!

    • @NomanAli-zd1bn
      @NomanAli-zd1bn 4 дні тому

      @@ConorBailey thank you much I am self taught graphic designer started learning web there is one website where when you hover over text on any element it shows elements in mask I hope you will cover this too I would love to learn from you thanks

  • @Tony.Nguyen137
    @Tony.Nguyen137 10 днів тому

    This is what i was looking for❤thank you

  • @adaferraramirenzi3269
    @adaferraramirenzi3269 14 днів тому

    and if i use image that are in my folder howi can do it?

  • @hafizulfitri5546
    @hafizulfitri5546 19 днів тому

    This is very creative. Clear tutorial.

  • @lnard0
    @lnard0 23 дні тому

    Thanks for this!

  • @Arjunkrm2003
    @Arjunkrm2003 28 днів тому

    where can i get source code

  • @stephanieegbuonu2626
    @stephanieegbuonu2626 29 днів тому

    super cool video, thanks.

  • @stephanieegbuonu2626
    @stephanieegbuonu2626 Місяць тому

    Great tutorial!

  • @diptyque273
    @diptyque273 Місяць тому

    Hi! Thank you so much for the great work ❤ I'd like to know how to add more images to project slider, guess I need to edit the javascript code 'animateProjects()' but have no clue!

  • @igdagusryankurniantara1053
    @igdagusryankurniantara1053 Місяць тому

    can we access camera from phone ?

  • @amanuelabiy7077
    @amanuelabiy7077 Місяць тому

    This was really helpful, thank you very much.

  • @Yasir-dev
    @Yasir-dev Місяць тому

    Provide source code

  • @byeolshe
    @byeolshe Місяць тому

    how to add a link to the images?

  • @prk8739
    @prk8739 Місяць тому

    thanks, you're hero

  • @blackrandall
    @blackrandall Місяць тому

    Belly belly good....they see me scrolling 😎😎

  • @_ademmeral
    @_ademmeral Місяць тому

    u'v gotten a new subscriber, bro. Continue on this kinda videoz :))

  • @_ademmeral
    @_ademmeral Місяць тому

    great <3

  • @paulehrig6414
    @paulehrig6414 Місяць тому

    Thx Conor, Another excellent video & narration with a lot of value. Your time is very appreciated!

    • @ConorBailey
      @ConorBailey Місяць тому

      Thanks mate! Appreciate your support

  • @Odessainfo541
    @Odessainfo541 Місяць тому

    Thank you so much for such valuable content! I am learning from your videos and really appreciate them and your labor. Thank you! If you will have a chance, could you take a look on Aristide Benoist portfolio? There are pretty interesting solutions that would be interesting to break down

  • @Pavel-wj7gy
    @Pavel-wj7gy Місяць тому

    You published a project that only worked for 3 years or so. As of now, even if I clone your repo, it doesn't show images nor does it scroll.

    • @ConorBailey
      @ConorBailey Місяць тому

      Are you running the project with parcel? Should still work…

  • @namphuong-ep6qk
    @namphuong-ep6qk Місяць тому

    another way to make mans grid layout in CSS is: .div(container) { width: (of your choice); columns: 4; columns-gap: 20px; }

  • @Zinab8850
    @Zinab8850 Місяць тому

    thanks man🤩

  • @oussamaoutazari9144
    @oussamaoutazari9144 Місяць тому

    can you do it on scoll instead of grabing it

  • @oussamaoutazari9144
    @oussamaoutazari9144 Місяць тому

    you deserve an award for teaching us in this amazing this videos.. Thank you

    • @ConorBailey
      @ConorBailey Місяць тому

      Thanks mate. Appreciate your support! 🫡

  • @tonysingh5334
    @tonysingh5334 Місяць тому

    I think rauno has some great ideas that need some explaining

    • @ConorBailey
      @ConorBailey Місяць тому

      Never heard of Rauno before now. Just checked out his Twitter and he shares some interesting stuff! Thanks for sharing!

  • @ww-zo2yl
    @ww-zo2yl Місяць тому

    I'm learning from your videos. Thank you as always. I appreciate it.

  • @gaurav5864
    @gaurav5864 Місяць тому

    Thanks for another video Conor ❤ Hope you make more videos on recreating awwwards website with plain JavaScript

    • @ConorBailey
      @ConorBailey Місяць тому

      Thanks Gaurav. I will do. Always keep an eye out for awwwards. Let me know if there’s anything you would like me to cover. 👍

    • @gaurav5864
      @gaurav5864 Місяць тому

      @@ConorBailey would be cool if you could explain how the vertical line on scroll animation works in the GitHub landing page. As we scroll down the elements appears with the vertical line on the left side that grows as we scroll down

    • @ConorBailey
      @ConorBailey Місяць тому

      @@gaurav5864 I’ll look in to it mate.

  • @ralphy1054
    @ralphy1054 Місяць тому

    This isn't working for me, even after listening to the other comments' advice by disabling all my firewalls (domain firewall, private network firewall, public network firewall). While running a web server, attempting to connect to my external ip address from any other device still results in the standard can't connect error

  • @atronstechnologies
    @atronstechnologies 2 місяці тому

    What about for doing forgot ppassword?

  • @atronstechnologies
    @atronstechnologies 2 місяці тому

    Nice Conor. But when i click register after feiling all fill the routing is load and don't finish and the data isnot insert to the database. what is the problem will be?

  • @ShifaAfreenSiddiqui
    @ShifaAfreenSiddiqui 2 місяці тому

    @Conor Bailey, I hope you will be able to assist me in the pool.query you created in the server.js, where when you create the call back function to check for the already registered users in the if condition statement: 'if.results.rows.length>0). I did all the checks with you until then. However in that specific check, my application is crashing due to run-time error. I've been stuck at it all day not being able to figure out what actually is the problem. I hope you would be able to help me...

    • @ShifaAfreenSiddiqui
      @ShifaAfreenSiddiqui 2 місяці тому

      Infact after the callback function for console.log(results.rows), the application crashes in that very first check.

    • @ConorBailey
      @ConorBailey 2 місяці тому

      Hey shifa. Sure . Is your code hosted anywhere? I’ll take a look!

    • @ConorBailey
      @ConorBailey 2 місяці тому

      Also, can you please post the full error message? Thanks

  • @osamaayub6004
    @osamaayub6004 2 місяці тому

    its giving error giving can anyone tell how to remove this error Cross-Origin-Opener-Policy policy would block the window.closed call.

  • @seankennelly2984
    @seankennelly2984 2 місяці тому

    Excellent, really helpful and easy to follow! I'm glad you left some mistakes in the video as they gave a chance for me to check my code and find them myself

  • @enitan2002
    @enitan2002 2 місяці тому

    What about if your project has authentication like NextAuth, doesn't authenticate on the mobile

  • @dk-xh7um
    @dk-xh7um 2 місяці тому

    does this work with .html files?

  • @jezreelfranklin3088
    @jezreelfranklin3088 2 місяці тому

    Right on time

  • @gaurav5864
    @gaurav5864 2 місяці тому

    Thanks for the tutorial Conor ❤

  • @rishiraj6329
    @rishiraj6329 2 місяці тому

    Can you give us the source code, It would be really helpful. I implement it but it is not working

  • @1TimeTrvlr
    @1TimeTrvlr 2 місяці тому

    Your videos are awesome, thank you for providing the GitHub too, it’s very helpful!

  • @ww-zo2yl
    @ww-zo2yl 2 місяці тому

    Wonderful! I admire you. I'm learning a lot. I'm looking forward to more JavaScript animation videos in the future.

  • @antoniobordamonte3952
    @antoniobordamonte3952 2 місяці тому

    thank you for the tutorial. it was extremely helpful and I was able to make my personal website cooler

  • @gaurav5864
    @gaurav5864 2 місяці тому

    Thanks for the videos Conor. I learnt a lot from your javascript videos. Hope you will be more active on UA-cam. Always waiting for your videos ❤

  • @pustynnyklakier4805
    @pustynnyklakier4805 2 місяці тому

    Wonderful! Where have You been? Everyone was waiting for new clip :)

    • @ConorBailey
      @ConorBailey 2 місяці тому

      Thanks mate! Just been learning some new things including Postgres and some cloud / aws. Will be sharing what I’ve working on in some future vids. Want to start making tutorials on some full stack apps which look nice 😊. Thanks for your support!

    • @pustynnyklakier4805
      @pustynnyklakier4805 2 місяці тому

      It's very good that You wanna show Us Your full stack skills :) Remember also that You are great with websites. Honestly, Your videos are best. I don't understand why U don't have more subs and views. Good luck bro!@@ConorBailey

  • @LetmeCook-qk7dk
    @LetmeCook-qk7dk 2 місяці тому

    I thought this was for an non local server :/

  • @user-wo4mw5yk7h
    @user-wo4mw5yk7h 2 місяці тому

    what theme you have installed in visual code ?

  • @otony_ng
    @otony_ng 2 місяці тому

    awesome tutorial series! I just started out with HTML and learned so much from this series! Fantastic job, very understandable, easy to follow, everything's done right!

  • @user-vp3ty9kx5y
    @user-vp3ty9kx5y 2 місяці тому

    Vote for part 2 : 👇

  • @carlo6044
    @carlo6044 2 місяці тому

    Tytytyty

  • @waleedkh9769
    @waleedkh9769 2 місяці тому

    But JS paths change all the time!

    • @ConorBailey
      @ConorBailey 2 місяці тому

      Yeah I can’t help you with that.

  • @mickmc1498
    @mickmc1498 3 місяці тому

    remember the old days when video intros / openers where the cool thing to have. Can you do a video or spin on whats the best way! cheers