uliana3412 Comments - Answer Overflow

uliana3412

Posts Comments

KPCKevin Powell - Community

•Created by uliana3412 on 4/10/2024 in #front-end

Carousel nivagation

10 replies

KPCKevin Powell - Community

•Created by uliana3412 on 4/10/2024 in #front-end

Carousel nivagation

10 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/26/2024 in #front-end

How to style "increment" and "decrement" arrow buttons in a scrollbar?

Yes! It's worked. I used then an image as you told. I would like to thank you very much for your videos and your discord server! You're helping me a lot in my CSS journey! THANK YOU!

3 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/11/2024 in #front-end

How to make the text appear letter by letter?

I was thinking to use the svg and add some css animations to make it scroll over the screen in a handwritten manner. What is typed.js @majkl ?

18 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/11/2024 in #front-end

How to make the text appear letter by letter?

Do you know how to create your own logo in svg ?without calculating all the letters' paths.

18 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/11/2024 in #front-end

How to make the text appear letter by letter?

Can you tell me please where did you see that @ghostmonkey ? When I open my dev tools, it's already too late to inspect this particular element...thanks

18 replies

KPCKevin Powell - Community

•Created by uliana3412 on 3/11/2024 in #front-end

How to make the text appear letter by letter?

I don't think it's using an svg...

18 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/26/2024 in #front-end

How to display content in a separate smaller window while still being on the main page?

Do you know what exactly is called this prop on modal to blur the background? Or what css property is usually used? Thank you😃

13 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/26/2024 in #front-end

How to display content in a separate smaller window while still being on the main page?

A quick question: are modals and routes used together? Or they can be used separately? If you toggle for example an instrument golden key on the right, it will pop ups a new window with settings but the url is the same. Does it mean that a modal can be used by itself without definig a new route? Thank you!!!

13 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/26/2024 in #front-end

How to display content in a separate smaller window while still being on the main page?

Ok! Got it. Thank you very much @missymae#2783 ! If you ckick a first card on the second row, you see the background is blurred, is that made with <Outlet /> and some css? Thanks!!!

13 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/26/2024 in #front-end

How to display content in a separate smaller window while still being on the main page?

Thank you very much @missymae#2783 ! I didn' really understand. Are these new windows just modals or new routes? Because for some of them the url actually changes,must be a new route. When the new page is rendered, the content is displayed in a differntely sized window. I wonder how to achieve that..Thank you!

13 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/15/2024 in #front-end

Text animation inside a slider bar component

You made it clear. Thank you very much ! 🙂

17 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/15/2024 in #front-end

Text animation inside a slider bar component

Thank you very much! It's working now!😃 I have to wait like 7 seconds before the animations begins again. Do you know how to shorten that time? Thanks a lot!

17 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/15/2024 in #front-end

Text animation inside a slider bar component

17 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/15/2024 in #front-end

Text animation inside a slider bar component

.Here's my React code :

<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
   <div id="item" ref={dragItemRef}></div>
   <p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
 </div>

<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
   <div id="item" ref={dragItemRef}></div>
   <p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
 </div>

Thank you very much!

17 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/8/2024 in #front-end

How to create flashing lines between grid items?

123 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/8/2024 in #front-end

How to create flashing lines between grid items?

That's my React code :

<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
   <div id="item" ref={dragItemRef}></div>
   <p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
 </div>

<div className="track_drag animate" ref={containerRef} onMouseDown={dragStart} onMouseUp={dragEnd} onMouseMove={drag}>
   <div id="item" ref={dragItemRef}></div>
   <p className="track_text track_text--before animate" ref={beforeRef}>Slide to unlock</p>
 </div>

123 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/8/2024 in #front-end

How to create flashing lines between grid items?

Hello @ἔρως and @MarkBoots ! I hope you are doing great. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Could you have a glance at my code if you have a little bit of time please? Thank you very much! 🙂

   .track_drag {
    border: 0.1px solid black;
    width: 350px;
    height: 60px;
    left:700px;
    top: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
    background: url("../../assets/galaxy.jpg");
    grid-row-start: 9;
    grid-row-end: span 2;
  }
  
  #item {
    width: 60px;
    height: 50px;
    justify-self: flex-start;
    background-color: rgb(51, 66, 165);
    border: 10px solid rgb(100, 66, 165);
    border-radius: 20px;
    /*touch-action: none;
    user-select: none;*/
    z-index: 999;
    margin: 11px 1px;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("a very long URL");
  }
  #item:active {
    background-color: rgb(160, 153, 249);
    border-color: rgb(100, 153, 249) !important; 
  }
  #item:hover {
    cursor: move;
    border-color: rgba(136, 136, 136, .25); 
  }
  .track_text {
    height: 100%;
    width: 100%;
    position: absolute;
    font: normal 15vh sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; 
    color: black;
    animation: slide 3s infinite ease-in-out;
  }

  @keyframes slide {
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
  }
  .slide {
    animation: slide 3s infinite ease-in-out;
  }

   .track_drag {
    border: 0.1px solid black;
    width: 350px;
    height: 60px;
    left:700px;
    top: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
    background: url("../../assets/galaxy.jpg");
    grid-row-start: 9;
    grid-row-end: span 2;
  }
  
  #item {
    width: 60px;
    height: 50px;
    justify-self: flex-start;
    background-color: rgb(51, 66, 165);
    border: 10px solid rgb(100, 66, 165);
    border-radius: 20px;
    /*touch-action: none;
    user-select: none;*/
    z-index: 999;
    margin: 11px 1px;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("a very long URL");
  }
  #item:active {
    background-color: rgb(160, 153, 249);
    border-color: rgb(100, 153, 249) !important; 
  }
  #item:hover {
    cursor: move;
    border-color: rgba(136, 136, 136, .25); 
  }
  .track_text {
    height: 100%;
    width: 100%;
    position: absolute;
    font: normal 15vh sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; 
    color: black;
    animation: slide 3s infinite ease-in-out;
  }

  @keyframes slide {
    0% {
      background-position: -100vh center;
    }
    60%, 100% {
      background-position: 100vh center;
    }
  }
  .slide {
    animation: slide 3s infinite ease-in-out;
  }

123 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/8/2024 in #front-end

How to create flashing lines between grid items?

Thank you very much @MarkBoots !

123 replies

KPCKevin Powell - Community

•Created by uliana3412 on 2/8/2024 in #front-end

How to create flashing lines between grid items?

Thank you very much @ἔρως . I hope you enjoy your week-end ! 🙂

123 replies

Gaming

Programming