Jump to content

Nic727

Members
  • Content count

    209
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Nic727

  • Rank
    Member
  1. Hi, I'm trying to make word change each X amount of seconds and I have the code right (I think), but for some reasons it's not working correctly. I'm basing my code on this guy website http://thierry-bonnaudet.com/ Here is what I did : https://codepen.io/anon/pen/NMegzo Don't understand what's wrong and how to correct it. Maybe you know a better code to do that? Thank you in advance for your help. ---- PS: I'm also trying to find a way to don't use position absolute, to correctly align my text, but without that, all other texts are following each other. Do you know if I can animate a display block to none? Like after the animation, it go to display none and when launching the other animation, it go to display block? EDIT: I fixed the animation bug with .In{ animation:slideLeft 2s; opacity:1!important; <-------- } .Out{ animation: slideRight 2s; opacity:0!important; <-------- }
  2. Nic727

    Creating Hero Slider

    ok lol. I tried to use OwlCarousel which looked very easy to use since they say to only add owl-carousel class to your div (or ul) and it will make a rotation of you div inside (or li), but for me it wasn't working I don't know why. My HTML was: <div class="hero-slider"> <ul class="slider-image owl-carousel"> <li style="background-image: url(images/background1.jpg)"></li> <li style="background-image: url(images/background2.jpg)"></li> </ul> </div> And JS from owl-carousel: $(document).ready(function(){ $(".owl-carousel").owlCarousel({ number:1, loop:true, mouseDrag:false, touchDrag:false, pullDrag:false, freeDrag:false, dots:false, autoplay:true, autoplaySpeed:5000, autoplayTimeout:5000, slideTransition: 'ease-in-out', animateOut: 'fadeOut', animateIn: 'fadeIn' }); }); For unknown reason it was just spawning lot of divs and was breaking my code: _____ So while waiting for an answer how to fixe that from GitHub, I found this Very easy and it works like a charm. <div class="hero-slider"> <ul class="slider-image"> <li class="hero-image active" style="background-image: url(images/background1.jpg)"></li> <li class="hero-image" style="background-image: url(images/background2.jpg)"></li> </ul> </div> $(document).ready(function(){ function play() { setInterval(function(){ var next = $(".slider-image .active").removeClass("active").next(".hero-image"); if (!next.length) { next = $(".slider-image .hero-image:first"); } next.addClass("active"); }, 8000); } play(); }); Here is my CSS. .hero-slider { width: 100%; height: 100%;; margin: 0; padding: 0; position: relative; z-index: 1; display: block; overflow:hidden; background-color:black; } .slider-image{ list-style: none; width: 100%; height:100%; padding:0; margin:0; } .slider-image li{ position:absolute; background-position:center center; background-size:cover; width: 100%; height:100%; opacity:0; transition:opacity 3s ease-in-out; } .slider-image li.active{ opacity:1; animation: fadeIn 3s; } I added a fadeIn animation (with animate.css) to have a fadeIn when page load instead of a popping image. Not sure it makes the animation each time the active class appear (change item). What do you think? I tried to add it to my ul (slider-image), but doesn't work here and in hero-slider it works 50% and make the image pop very fast at the end. The only problem is the active class that I have to add manually. Do you know a way to add the active class when the page load? I tried by removing it, but it wait 8s (8000) before first image appearing. Would be easier when converting to Wordpress to have the class added automatically to the first item in the list.
  3. Nic727

    Creating Hero Slider

    No just a slider with images with fade-in/out effect for my homepage. I know that people can just go into the code to find my images. What I mean is that it is awkward to see a "save image" when it changing every 5 seconds. I found this great pure css slideshow http://urbaninfluence.com/2015/05/make-a-background-image-slider-with-css-keyframes/ It does look good enough, but not sure about the use of keyframe, because it will be complicated to automate that if I add/remove an image in my future WordPress website. Plugins are just adding too much code and I want a clean and fast website. I just hate to see divs inside divs inside divs when you can only get one div doing everything. I was trying to find a single small code that will just do what I want to do... change <li> each 5 seconds with a fade effect and make a loop. I found this https://owlcarousel2.github.io/OwlCarousel2/ It looks good, but it came with so many things that I will not really use that I don't know if I should download that. Here is my code for now: <div class="hero-slider"> <ul class="slider-image"> <li style="background-image: url(images/background1.jpg)"></li> <li style="background-image: url(images/background2.jpg)"></li> </ul> </div> I know that with some help when I will convert into WordPress it will be easy to just add a <li> with background-image. Should I take Owlcarousel? Do you know something else? Should I do my custom code with your help? Thank you
  4. Nic727

    Creating Hero Slider

    Hi, I would like to create a slider on my homepage and I was reading about how to make one via Google, but there is so many different way that I'm a bit lost. I found pure CSS way to do a slideshow, but I'm not sure it's legit for modern standard. Do you know a Javascript or JQuery way to do a slider? I just want a minimalist code that work and not a code taking 50 lines. Is it better to use background-image for the slider or img inside a list? I could use background-image to prevent people from saving my slider image, but I would need multiple class like .img1, .img2 , etc. Since I'm currently coding my website by hand and will use pinegrow in the future to convert into a WordPress theme, what would be better? Using an existing plugin (that I will need to fixe myself with my own css rules later) or creating my own slider with minimal code? I'm looking a way to be able to easily remove/add new image to the slider, so is it possible to automatically add a class and a background-image or it's better to automatically add/remove an img? I know that Revolution Slider use background-image inline styles, so maybe another way? Thank you
  5. Nic727

    Lightbox or not?

    Hi, when clicking on an image in my gallery, I would like to have something like that: 1. White or black background 2. Big image (fullscreen or not, depend of height) 3. Left and right button to navigate between images. I know a lightbox can make that very easy, but I’m not really sure it’s possible to add a custom information overlay like I want. I know some lightbox can show information under the image, but my idea was to have a camera icon and when you click on it more informations are appearing. In my mockup it’s wrong since the icon and info should be in the middle to avoid getting out of image if portrait or landscape. I thought about a carousel... do you think it can do that? The only problem is that I can’t have a gallery + carousel since if you click on an image, it will not directly go to that image in the carousel page (which have to load images again). How can I achieve that? I currently use Wordpress, so I’m not sure how to do that in both coding or via plugin. thank you
  6. Nic727

    Favourite html editors...

    I was using Notepad++ when I started, but since the design is a bit dated, I changed to Visual Studio Code which is very good at debugging and working with.
  7. Nic727

    gradient border

    Thank you it works! I'm surprised that in 2018 we still don't have gradient support for border colors... I hope it will come.
  8. Nic727

    gradient border

    Hi, I would like my active menu item bottom border to have a gradient color, but I can't find how. Currently I'm good with a border-color and 2px border, but I tried with border-image and linear gradient, but it's not working. Do you have any idea about putting a gradient color for a bottom border? thx
  9. Hi, I have a problem with my website on safari. Here is what my website should look like. In MS Edge: here is what Ihave in Safari: How can I show my footer and getting a true VH in Safari? thx
  10. Nic727

    Website mockup

    I made some ajustements to my design. So here is my very final home page design. I will keep this one, just not sure if I add a Works section. I know I will add photography to my website, but I don't really have a lot of works to show. Most videos (if I do some) will be in my blog or inside albums. Here are two ideas for the albums page. First idea was to make an almost full width album with parallax scrolling, but I think it will just be a bit annoying since my idea was to have a hover effect to show name of the album above a blurry pic. So I think it wasn't great, but what do you think? Should I just keep the hover effect always ON (with or without blur effect)? The other idea is to make two columns with albums, but wasn't sure if I was keeping a parallax effect or not.
  11. Nic727

    How to make justified grid?

    Hi, I would like to have a photography section on my website showing my photos in a justified grid, but how can I do that? I was thinking using masonry at first, but I changed my mind for a justified grid option instead. I'm not sure if it's possible with CSS only or Javascript? I found this example; https://the7.io/main/gallery/albums-justified-grid/5-albums-justified-grid/ Just not sure how to achieve that. If possible, would like images to be in order from left to right and sometimes, one taking full width and after 2 or 3 columns... A bit like that https://www.narikki.com/mountains-of-new-zealand Thank you
  12. Nic727

    Website mockup

    Here is another homepage. Waiting for your feedback before starting the real thing! Personally, I really love the template this guy used thierry-bonnaudet.com/ but I want to create my own thing. Just need to figure the lightbox I would like to have... If you know a plugin or how to do that, I would appreciate that. My idea is to click on an image, it show in fullscreen into a lightbox, but you can click on a small camera icon to show a bubble with informations (Or blur the image and show informations over it).
  13. Nic727

    Website mockup

    Hi, I will start my website from scratch using webflow really soon, but for now I'm just making the overall design in Affinity Designer (illustrator alternative). I was thinking about getting a WordPress template first, but WordPress is not that good when you want something specific and codes can be a mess when you change a lot of things. That's why I think webflow is a good idea (but unfortunately, I will have to host somewhere else than my current website ). I'm creating a website about some design/web work, but also some of my best photography. Well, here I start and I would like your feedback about if it can be a good user experience and what could be improved. HOME Option 1 Option 2 The first option is much more about the overall look of the website (you will see images bellow), but I thought it could be nice to have a good landing page with a fullscreen image instead. What do you think? PORTFOLIO Here is a page of my works/albums. After that here is what an album page will look like. Just no sure if I keep square image, masonry style (like mockup) or masonry with spacing. What do you think? I also thought it was a great idea to add a little description on top about where it was shot and when. Also, when you click on an image, not sure if I use a normal lightbox or something else. Don't know if Webflow allow custom lightbox. Was thinking about a full white background with a camera icon that show you some infos about the camera and location. Do you think it's possible? Not sure how different page for each image could work since it have to load them every single time... BLOG For the Blog part, I found a nice template with this kind of style and I thought it was looking very great. So I decided to inspire my design from that. I think it's easy to understand that most recent is on top. I'm thinking about making my own pages for blog or redirecting to a subdomain using Exposure.co which is good at making clean and minimalist blog pages. Maybe I will make images a bit bigger and every informations on the bottom-left side? Or keep it like that, but remove the green color and keep white? ABOUT Was thinking about using a colored button matching the logo and the current page indicator, but should I just make a black and white button? CONTACT Same thing about the button. Not sure...
  14. Nic727

    Blur bellow element

    Hi, I would like to know if I can blur an element that could affect an element bellow it. For example, I would like my navigation bar to be white with opacity of 0.3-0.5 and blur it to make the element bellow be blurry. I tried very fast to do that, but only thing happening when adding filter blur to my navigation bar is that the text (menu) and nav bar are blurry, but not what's bellow (text, images, etc.). I was trying to make something like the Fluent Design like Microsoft. Thank you
  15. Nic727

    JAVA operator and result help

    Nevermind, I just found out that I just needed to change the order of my else if and now it works. I changed in this order : if (g6 < 50) { g7 = 0; g8 = 0; } else if (g1 < 1){ g7 = 0; } else if (g1 >= 0){ g8 = 0; } else if (g7 > 0) { g8 = 0; } else if (g8 > 0) { g7 = 0; }
×