Jump to content
#StayAtHome ×

galvin

Members
  • Content Count

    614
  • Joined

  • Last visited

Community Reputation

0 Neutral

About galvin

  • Rank
    Prolific Member

Profile Information

  • Gender
    Not Telling
  1. I have been tasked with attempting to recreate a web app that allows a user to upload a photo and then cut out a specific part of an image that will be saved as a transparent PNG, with the main use being removing backgrounds from an image (i.e. cutting out a face to use as an avatar, etc) I found two online tools that already do this in different ways: 1. Smart Scissors: Quick video shows how you can drop anchor points with your mouse and it will try to auto find the border and "snap to". Pretty slick but doesn't work perfectly when I played with it. And requires a separate "invert" option to handle all scenarios. http://fotoflexer.com/demos.php 2. Clipping Magic: This one is very cool and surprisingly accurate. You basically paint rough green lines over the stuff you want to keep and red lines over the stuff you want to cut out and a live preview lets you see the result. https://clippingmagic.com/tutorials/basics I am not asking for anyone to give me any code whatsoever, just curious, do you think both of these types of things are doable strictly using PHP (using GD and maybe some other custom PHP classes floating around the web)? Are you able to tell what they both use now? Actually looks like Smart Scissors uses Flash, but not sure about Clipping Magic. I ideally would make something more like Clipping Magic. I just don't want to start building in PHP if there are things that some of you smarter people on this site can tell I will never be able to accomplish using solely PHP, even if I was the best PHP developer ever. Any info, direction, advice would be greatly appreciated. Thanks!
  2. On this dev url , the blue down "auto scroll" arrow under the headline text uses a simple anchor to jump to a spot on the page (and some javascript to slow down the scroll, but I don't think that matters as far as my question goes). As you can see, I'm also using Skrollr to animate objects and when you scroll down manually, the page kind of 'sticks' when the iMac reaches the top of the page. THAT is where I'd like the "auto scroll" arrow button to jump to and STOP. Right now, it scrolls to that spot, but then keeps going a little further. I've tried putting the anchor element in all different spots, but none get the desired resting place. That got me wondering if you can specify that an anchor scrolls down to a certain scroll position (for example, 300 pixels) rather than to an actual anchor element. In other words, my skrollr code fixes the monitor to the top of the page when the user scrolls 300 pixels. So that is where I need the "auto scroll" down arrow to jump to. Anyone know if this is possible, or have another idea? Thanks!
  3. Wasnt sure whether to put this in Javascript or CSS, sorry... I'm using Skrollr at this dev URL (http://workwave.joomlatest01.mms-dev.com/) to make all the desk items "slide away" NOTE: things are messy currently but you get the gist of what happens (i.e. the clutter moves away and the software on the monitor replaces it) I'm using this "helper" function, found here (https://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/)... var setSkrollr = function($el, data) { for (var i = 0, l = data.length; i < l; i++) { // loop all data entries (scroll positions + css property & value) var d = data[i], // the current data entry px = d[0]; // the scroll position (in pixels) css = d[1]; // the css property + value to set $el.attr('data-' + px, css); } } So the skrollr code for these moving desk items looks like this currently... jQuery(function($) { setSkrollr($('#t3-mainnav'), [[0, 'height: 100px'], [300, 'height: 50px']]); setSkrollr($('#t3-mainnav .container'), [[0, 'top: 25px; height: 100px'], [300, 'top: 0px; height: 50px ']]); setSkrollr($('#filecabinet'), [[0, 'top: -60px; left: 60%; display: block;'], [300, 'top: 280px; left: 200%; display: none']]); setSkrollr($('#calculator'), [[0, 'top:520px; left:0%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#stapler'), [[0, 'top:440px; left:12%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#pens'), [[0, 'top:280px; left:38%;'], [300, 'top:580px; left:-200%; ']]); setSkrollr($('#postits'), [[0, 'top:470px; left:70%; display: block;'], [200, 'top:700px; left:200%; display: none;']]); setSkrollr($('#cup'), [[700, 'top:640px'], [1800, 'top:-500px'] ]); setSkrollr($('#map'), [[0, 'top:530px; left:73%; display: block'], [200, 'top:700px; left:200%; display: none; ']]); setSkrollr($('#calendar'), [[0, 'top:500px; left:22%;display: block'], [300, 'top:740px; left:-200%; ']]); setSkrollr($('#monitor'), [[0, 'display:none'], [100, 'display:block; top: 100%'], [300, 'top:11%; position: fixed'], [700, 'top:11%'], [1600, 'top:-100%'] ]); setSkrollr($('#headline'), [[700, 'top:90px'], [1800, 'top:-400px'] ]); setSkrollr($('#desk'), [[700, 'top:560px'], [1800, 'top:-500px'] ]); setSkrollr($('.toplink'), [[0, 'display:block'], [10, 'display:none']]); skrollr.init({ smoothScrolling: false }); I can change the size of the images based on screen resolution using CSS Media Queries and "scale" to reduce the size of the images as the screen width decreases. But right now things are POSITIONED using that skrollr helper function above and I can't change the positions based on screen resolutions. In other words, whatever position I specify in the helper function is the position always. So I can say start the map 85% from the left and it will always be 85% from the left regardless of screen size. So visually it starts in different spots, i.e. if things are positioned OK on a 1920 monitor, when you go down to a 1024 monitor, things are not ideally positioned. It would be a lot of work, but if I could adjust starting/ending positions in media queries, I could make things look perfect at pretty much every resolution. Anyone know if this is possible? I'm new to Skrollr so may just be missing something. Or if anyone has other ideas on how to do this animation easier/more efficiently, please let me know. Thanks!
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.